JavaScript構造函數(shù)原理及實現(xiàn)流程解析
在學習構造函數(shù)之前我們需要知道我們學習構造函數(shù)需要學習什么:
1.什么是構造函數(shù)
2.構造函數(shù)用來做什么
3.構造函數(shù)的執(zhí)行過程
4.構造函數(shù)的返回值
1.所以首先我們需要知道什么是構造函數(shù):
在我看來,構造函數(shù)具有兩個特點可以判斷是否為構造函數(shù):
1.當函數(shù)名為首字母大寫時,這個是一個可以大概判斷構造函數(shù)與普通函數(shù)的一個特點,但是不是絕對正確,因為普通函數(shù)也可以是大寫字母開頭
2.當我們需要調(diào)用構造函數(shù)時我們需要new <構造函數(shù)>,也就是產(chǎn)生一個實例化對象。
function Student(name,age,sex,height){ this.name=name; this.age=age; this.sex=sex; this.height=height; } //調(diào)用構造函數(shù),也就是實例化一個對象。 var p=new Student('luke',23,'nan',180) console.log(p);
控制臺輸出:
可以看出輸出的是一個對象
2.構造函數(shù)是用來做什么的:
1.當我們平時創(chuàng)建對象時可能會用如下創(chuàng)建對象的方式來創(chuàng)建,上代碼:
//用創(chuàng)建對象方式來創(chuàng)建 var stu1={name:'zs',age:20,sex:"male",height:186}; var stu2={name:'ls',age:21,sex:"male",height:180} var stu3={name:'ww',age:22,sex:"female",height:156} var stu4={name:'jx',age:23,sex:"female",height:165} var stu5={name:'xf',age:24,sex:"male",height:180}
2.當我們用構造函數(shù)來創(chuàng)建這個對象時:
//用構造函數(shù)來創(chuàng)建對象 function Student(name,age,sex,height){ this.name=name; this.age=age; this.sex=sex; this.height=height; } var stu1=new Student('zs',20,"male",186); var stu2=new Student('ls',21,"male",180); var stu3=new Student('ww',22,"female",156); var stu4=new Student('jx',23,"female",165); var stu5=new Student('xf',24,"male",180);
這樣看起來是不是要簡潔的多呢,這里因為只有五個人,要是五六十個就會看出明顯效果
3.構造函數(shù)的執(zhí)行過程
在前面我們知道了構造函數(shù)是什么,和其作用,也通過代碼來看出了構造函數(shù)的作用。那我現(xiàn)在我們需要知道構造函數(shù)的執(zhí)行過程,因為學習一個東西我們需要學習其原理,而不是其表面
所以接下來我就來講一講構造函數(shù)的執(zhí)行過程:
在之前我們都知道,要調(diào)用構造函數(shù)我們需要在其前面加一個new關鍵字,所以主要就是new在其作用,在執(zhí)行new關鍵字后,很明顯,他跟以往的函數(shù)調(diào)用就不同了,他會依次執(zhí)行以下步驟:
1.new過后會產(chǎn)生一個空對象,作為一個返回的對象實例
2.將空對象的原型指向了構造函數(shù)的prototype屬性
3.將空對象的值賦值給構造函數(shù)里面的this值
4.開始執(zhí)行構造函數(shù)里的代碼
4.構造函數(shù)的返回值
知道了其執(zhí)行過程,顯而易見,new關鍵字創(chuàng)建的實例對象為構造函數(shù)的返回值。
其實這是不對的,哈哈。
返回值需要分情況來定:
1.當函數(shù)中沒有return來返回值的時候,會返回this,也就是實例化對象。就像在說2.構造函數(shù)有什么作用時說的一樣
2.當函數(shù)中return中返回一個復雜類型數(shù)據(jù)的時候,構造函數(shù)會返回這個復雜類型數(shù)據(jù),上代碼:
function Student(name,age,sex,height){ this.name=name; this.age=age; this.sex=sex; this.height=height; return {name:'fanhui',weight:60} } var Stu1=new Student('zs',20,"male",186); console.log(Stu1);
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
使用ajax的post同步執(zhí)行(實現(xiàn)方法)
下面小編就為大家分享一篇使用ajax的post同步執(zhí)行(實現(xiàn)方法),具有很好的參考價值,希望對大家有所幫助2017-12-12TypeScript泛型參數(shù)默認類型和新的strict編譯選項
這篇文章主要介紹了TypeScript泛型參數(shù)默認類型和新的strict編譯選項,對TypeScript感興趣的同學,可以參考下2021-05-05基于Web?Components實現(xiàn)一個日歷原生組件
這篇文章主要為大家詳細介紹了如何利用Web?Components實現(xiàn)一個簡單的日歷原生組件,文中的示例代碼講解詳細,需要的小伙伴可以了解一下2023-07-07JS實現(xiàn)基于Sketch.js模擬成群游動的蝌蚪運動動畫效果【附demo源碼下載】
這篇文章主要介紹了JS實現(xiàn)基于Sketch.js模擬成群游動的蝌蚪運動動畫效果,涉及Sketch.js插件的使用及HTML5元素的應用技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-08-08