您好,登錄后才能下訂單哦!
這篇文章主要介紹“JavaScript構(gòu)造函數(shù)怎么自定義”的相關(guān)知識(shí),小編通過實(shí)際案例向大家展示操作過程,操作方法簡單快捷,實(shí)用性強(qiáng),希望這篇“JavaScript構(gòu)造函數(shù)怎么自定義”文章能幫助大家解決問題。
典型的面向?qū)ο缶幊陶Z言(比如C++和Java),存在“類”(class)這個(gè)概念。所謂“類”就是對(duì)象的模板,對(duì)象就是“類”的實(shí)例。但是,在JavaScript語言的對(duì)象體系,不是基于“類”的,而是基于構(gòu)造函數(shù)(constructor)和原型鏈(prototype)
‘面向?qū)ο缶幊?amp;rsquo;的第一步,就是要生成對(duì)象。而js中面向?qū)ο缶幊淌腔跇?gòu)造函數(shù)(constructor)和原型鏈(prototype)的。
前面說過,“對(duì)象”是單個(gè)實(shí)物的抽象。通常需要一個(gè)模板,表示某一類實(shí)物的共同特征,然后“對(duì)象”根據(jù)這個(gè)模板生成。
js語言中使用構(gòu)造函數(shù)(constructor)作為對(duì)象的模板,所謂構(gòu)造函數(shù),就是提供一個(gè)生成對(duì)象的模板,并描述對(duì)象的基本結(jié)構(gòu)的函數(shù)。一個(gè)構(gòu)造函數(shù),可以生成多個(gè)對(duì)象,每個(gè)對(duì)象都有相同的結(jié)構(gòu)。
對(duì)于JS中的任何一個(gè)普通函數(shù),當(dāng)用new關(guān)鍵字來調(diào)用時(shí),它就是構(gòu)造函數(shù)??梢娕c函數(shù)定義無關(guān),與調(diào)用方法有關(guān)。在社區(qū)中,通常默契地將函數(shù)名首字母大寫來表示該函數(shù)以后希望被作為構(gòu)造函數(shù)來使用
作用:構(gòu)造新對(duì)象,設(shè)置對(duì)象的屬性和方法
ECMAScript提供了多個(gè)內(nèi)置構(gòu)造函數(shù),如 Object、Array、String、Boolean、Number、Date…等等。
var obj = new Object(); var arr = new Array();
ECMAScript也允許自定義構(gòu)造函數(shù)
構(gòu)造函數(shù)一般首字母會(huì)大寫,為了和普通函數(shù)區(qū)分
一個(gè)構(gòu)造函數(shù)可以通過new創(chuàng)建多個(gè)實(shí)例對(duì)象
創(chuàng)建構(gòu)造函數(shù)時(shí),里面的屬性和方法前必須加this,this就表示當(dāng)前運(yùn)行時(shí)的對(duì)象
function Person(name, height) { this.name = name; this.height = height; this.bark = function(fs){ return fs } } var boy = new Person('Keith', 180); console.log(boy); //Person {name: 'Keith', height: 180, bark: ?} console.log(boy.constructor); //f Person(){} //整個(gè)構(gòu)造函數(shù)原型 console.log(boy.bark(8)); //8 console.log(boy.name); //'Keith' console.log(boy.height); //180
function Cat1(name){ this.name = name; console.log(this) //先打印 new的時(shí)候打印 Cat1 {name: 'kk'} } var cat3 = new Cat1("kk"); console.log(cat3); //后打印 Cat1 {name: 'kk'} 指向原型鏈,再賦值
構(gòu)造函數(shù)的return
function Dog(){ this.name = "貝貝"; this.bark = function(){ console.log("汪汪汪"); } // return 0; // return []; } var d1 = new Dog(); console.log(d1);//Dog {name: '貝貝', bark: ?} //構(gòu)造函數(shù)不需要return 就可以返回結(jié)果
return一個(gè)基本數(shù)據(jù)類型,結(jié)果不變,依舊返回一個(gè)對(duì)象
例:
return 0; console.log(d1);//Dog {name: '貝貝', bark: ?}
return一個(gè)復(fù)雜數(shù)據(jù)類型,返回一個(gè)復(fù)雜數(shù)據(jù)類型
例:
return []; console.log(d1);//[]
構(gòu)造函數(shù)構(gòu)造出的對(duì)象帶有類型標(biāo)識(shí)
console.log(p1) Person { name: 'zs', age: 12, eating: [Function: eating], } //打印結(jié)果有類型標(biāo)識(shí) //Person 就是類型標(biāo)識(shí) console.log(p1) {name: 'zs', age: 12, eating:[Function: eating]} //無類型標(biāo)識(shí)的
構(gòu)造函數(shù)的原理(new之后發(fā)生了什么)
構(gòu)造函數(shù)之所以能構(gòu)造出對(duì)象,其實(shí)JS幫助我們做了很多騷操作。你以為new之后直接執(zhí)行函數(shù)體代碼,其實(shí)并不是,事實(shí)比我們看到了多了四步
1 自從用new調(diào)用函數(shù)后,JS引擎就會(huì)在內(nèi)存中創(chuàng)建一個(gè)空對(duì)象{}
const newObj = {};
2 新對(duì)象的__proto__屬性指向構(gòu)造函數(shù)的原型對(duì)象
(通俗理解就是新對(duì)象隱式原型__proto__鏈接到構(gòu)造函數(shù)顯式原型prototype上。)
newObj.__proto__ = functionName.prototype
3 構(gòu)造函數(shù)內(nèi)部的this會(huì)指向這個(gè)新對(duì)象(即將構(gòu)造函數(shù)的作用域指向新對(duì)象)
this = newObj
4 從上到下執(zhí)行函數(shù)體(只有這步是我們能直觀看到代碼的)
5 返回創(chuàng)造出來的對(duì)象(如果構(gòu)造函數(shù)沒有返回對(duì)象,則默認(rèn)返回this。在函數(shù)體內(nèi)部的this指向新創(chuàng)建的內(nèi)存空間,默認(rèn)返回 this 就相當(dāng)于默認(rèn)返回了該內(nèi)存空間)
例子:
function Person(name, age) { this.name = name; this.age = age; this.eating = function() { console.log(this.name + ' is eating'); } } const p1 = new Person('zs', 12); //---------------------------------------------------------------------------- /*實(shí)際JS引擎幫助我們實(shí)現(xiàn)的操作*/ const newObj = {}; newObj.__proto__ = Person.prototype; this = newObj; this.name = name; this.age = age; this.eating = function() { console.log(this.name + ' is eating'); } return newObj;
在構(gòu)造函數(shù)原型上綁定方法節(jié)省空間
采用構(gòu)造函數(shù)的確可以批量創(chuàng)建對(duì)象,且對(duì)象還都有該構(gòu)造函數(shù)的logo,那么構(gòu)造函數(shù)有什么缺點(diǎn)嗎?有的。由于每次函數(shù)調(diào)用都會(huì)創(chuàng)建新的對(duì)象,對(duì)象中的函數(shù)(比如eating)也會(huì)創(chuàng)建多份,對(duì)于函數(shù)而言創(chuàng)建多份沒有必要,能不能共用一個(gè)函數(shù)呢?
function Person(name, age) { this.name = name; this.age = age; } const p1 = new Person('zs', 12); // 在函數(shù)原型上添加方法 Person.prototype.eating = function() { console.log(this.name + ' is eating'); // zs is eating return 5 } console.log(p1.eating()); //5
將方法轉(zhuǎn)移到構(gòu)造函數(shù)原型上來定義后,對(duì)于實(shí)例對(duì)象p1,依然可以調(diào)用eating方法。調(diào)用p1的eating方法時(shí),如果p1對(duì)象沒有該方法,會(huì)去p1對(duì)象的原型對(duì)象p1.__proto_
找,因?yàn)樵跇?gòu)造p1時(shí),綁定的原型:p1.__proto__ = Person.prototype
,所以可以找到p1.__proto__.eating
關(guān)于“JavaScript構(gòu)造函數(shù)怎么自定義”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。