對(duì)象的創(chuàng)建繼承

UCloud 發(fā)布于2019-08-23 16:13 / 2951人閱讀

摘要：一創(chuàng)建一個(gè)對(duì)象起因用或?qū)ο笞置媪縿?chuàng)建對(duì)象會(huì)產(chǎn)生大量的重復(fù)代碼而且只能通過變量名來區(qū)分不同的對(duì)象沒有記錄對(duì)象的類型例如創(chuàng)建對(duì)象字面量創(chuàng)建對(duì)象工廠模式創(chuàng)建對(duì)象工廠模式解決了相似代碼重復(fù)書寫的問題好處中無法創(chuàng)建類為了模仿類的創(chuàng)建方式抽象具體對(duì)象的

一.創(chuàng)建一個(gè)對(duì)象

起因.................
用Object或?qū)ο笞置媪縿?chuàng)建對(duì)象會(huì)產(chǎn)生大量的重復(fù)代碼,而且只能通過變量名來區(qū)分不同的對(duì)象,沒有記錄對(duì)象的類型
例如:

 //Object創(chuàng)建對(duì)象
 var student = new Object();
 student.name = "s";
 student.age = "20";
 var student1 = new Object();
 student1.name = "s1";
 student.age = "20";
 //字面量創(chuàng)建對(duì)象
 var student = {
   name: "s",
   age: "23"
 }
 var student1 = {
   name: "s",
   age: "23"
 }

1.工廠模式創(chuàng)建對(duì)象

工廠模式解決了相似代碼重復(fù)書寫的問題

//好處:js中無法創(chuàng)建類,為了模仿類的創(chuàng)建方式,抽象具體對(duì)象的創(chuàng)建過程;
//缺點(diǎn):工廠模式創(chuàng)建的對(duì)象是通過普通函數(shù)調(diào)用實(shí)現(xiàn)的,沒有解決標(biāo)識(shí)對(duì)象類型的問題,無法區(qū)分對(duì)象的類型,
  function person(name) {
   var o = new Object();
   o.name = name;
   o.sayName = function() {
     console.log(this.name)
   }
   return o;
 }
 var p1 = person("a");
 var p2 = person("b");

2.構(gòu)造函數(shù)模式創(chuàng)建對(duì)象

 function Person(name) {
   this.name = name;
   this.sayName = function() {
     console.log(this.name);
   }
//function() { console.log(this.name);}相當(dāng)于new Function(){console.log(this.name);}}
 var a = new Person("ww");
 a.sayName();
 console.log(a)

new 一個(gè)實(shí)例的過程:
(1)先創(chuàng)建一個(gè)對(duì)象
(2)將構(gòu)造函數(shù)的作用域賦給新對(duì)象
(3),執(zhí)行構(gòu)造函數(shù)中的代碼
(4)返回新對(duì)象

構(gòu)造函數(shù)模式解決了標(biāo)識(shí)構(gòu)造函數(shù)類型的問題,但是構(gòu)造函數(shù)內(nèi)部每定義一個(gè)函數(shù)就會(huì)實(shí)例化一個(gè)對(duì)象,可以通過將公用的方法提到全局環(huán)境下,通過普通函數(shù)調(diào)用的方式實(shí)現(xiàn)調(diào)用函數(shù),避免了重復(fù)實(shí)例化對(duì)象的問題

function Person(name) {
   this.name = name;
   this.sayName = sayName;
 }

 function sayName() {
   console.log(this.name)
 }
 var a = new Person("p1");
 var b = new Person("p2");
 a.sayName();
 b.sayName();

如果Person內(nèi)部封裝較多的函數(shù),會(huì)導(dǎo)致定義大量的全局函數(shù),這些函數(shù)散亂分布在全局環(huán)境中,失去了封裝性.為了解決這個(gè)問題,可以用原型模式創(chuàng)建對(duì)象

3.原型模式

原型模式創(chuàng)建對(duì)象,把屬性和函數(shù)添加到對(duì)象的prototype上,實(shí)例化一個(gè)對(duì)象p1,p1可以通過原型鏈訪問到原型鏈上的對(duì)象

 function Person() {}
 Person.prototype.name = "ww";
 Person.prototype.sayName = function() {
   console.log(this.name);
 }
 var p1 = new Person();
 p1.sayName();

(1)原型模式的另一種方式:

這種方式會(huì)導(dǎo)致,Person.prototype上原本指向Person的constructor丟失,可以手動(dòng)添加constructor屬性,如下

(2)如果先創(chuàng)建實(shí)例,再定義Person.prototyp的值會(huì)報(bào)錯(cuò),p1還是通過[[prototype]]隱式屬性指向Person沒修改過的原型,導(dǎo)致找不到sayName方法

解釋如js高級(jí)程序設(shè)計(jì)一書中的例子:

(3)原型鏈模式存在以下問題:(1),prototype上的屬性和方法共享,一個(gè)對(duì)象對(duì)prototype屬性的修改會(huì)影響另一個(gè)對(duì)象的屬性;(2)不能傳遞參數(shù)

4.組合使用構(gòu)造函數(shù)和原型函數(shù)

我們可以把一些共享的屬性和方法添加到prototype,再利用構(gòu)造函數(shù)在實(shí)例對(duì)象上添加不同屬性

二.繼承 1.原型鏈繼承

通過將一個(gè)構(gòu)造函數(shù)的原型重新賦值(另一個(gè)構(gòu)造函數(shù)的實(shí)例)實(shí)現(xiàn)繼承
例子:

function SuperType() {
  this.property = ["p1"];
}
SuperType.prototype.getValue = function() {
  console.log(this.property);
}

function SubType() {
  this.subproperty = ["1"];
}
SubType.prototype.getSubValue = function() {
  console.log("getSubVlue", this.subproperty);
}
SubType.prototype = new SuperType();
var a = new SubType();
console.log("a", a);

結(jié)果:

對(duì)于引用類型屬性,原型鏈繼承會(huì)將該屬性作為公共屬性,誰都可以對(duì)它的值進(jìn)行修改;對(duì)于像name這樣的非引用類型,每創(chuàng)建一個(gè)實(shí)例就會(huì)定義一個(gè)新額屬性,不會(huì)和其他實(shí)例中的屬性共享,如下所示

2.借用構(gòu)造函數(shù)

為了解決引用類型值共享的問題和原型鏈繼承不能傳遞參數(shù)的缺陷,可以在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)。如下:

function SuperType() {
  this.property = ["p1"];
}
function SubType() {
  this.subproperty = ["1"];
  SuperType.call(this);
}
SubType.prototype = new SuperType();
var a = new SubType();
var b = new SubType();
a.property.push("2");
console.log(a.property, b.property);

利用單純的借用構(gòu)造函數(shù)解決了引用類型值共享的問題,但是如果大量的函數(shù)寫著超類中,函數(shù)無法復(fù)用,所有需要結(jié)合原型構(gòu)造函數(shù).

3.組合構(gòu)造函數(shù)

組合構(gòu)造函數(shù)到的思路是將利用構(gòu)造函數(shù)實(shí)例實(shí)現(xiàn)對(duì)屬性的繼承,利用原型鏈來實(shí)現(xiàn)對(duì)原型對(duì)象的屬性和函數(shù)的繼承.

由于給SubType.prototype直接賦值為SuperType的實(shí)例,導(dǎo)致constructor丟失,利用Object.defineProperty找回

4.原型式繼承

思路:基于已有的對(duì)象創(chuàng)建新對(duì)象,繼承一個(gè)現(xiàn)成的對(duì)象

原型式繼承存在的問題就和原型模式一樣,對(duì)于引用型屬性有共享的特性

5.寄生式繼承

思路:創(chuàng)建一個(gè)僅用于封裝繼承過程的函數(shù)

該繼承方式存在的問題是a對(duì)象內(nèi)部的函數(shù)不能復(fù)用

6.寄生組合繼承

組合構(gòu)造函數(shù)也有缺陷,需要調(diào)用兩次超類構(gòu)造函數(shù),降低效率

function SuperType(name) {
  this.name = name;
  this.books = ["b1"]
}

SuperType.prototype.getName = function() {
  console.log(this.name);
}

function SubType(name, age) {
  this.age = age;
  SuperType.call(this, name); //第二次調(diào)用構(gòu)造函數(shù)
}

SubType.prototype = new SuperType(); //第一次調(diào)用構(gòu)造函數(shù)
SubType.prototype.constructor = SubType;
SubType.prototype.getSubValue = function() {
  console.log("getSubVlue", this.age);
}

利用寄生式繼承來繼承超類的原型,利用構(gòu)造函數(shù)繼承實(shí)例屬性

有不對(duì)或者表達(dá)不準(zhǔn)確的地方歡迎指出!

GPU云服務(wù)器云服務(wù)器 java創(chuàng)建對(duì)象的幾種方式對(duì)象繼承objective-cclass 創(chuàng)建對(duì)象 python創(chuàng)建對(duì)象

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102798.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

UCloud

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【物聯(lián)網(wǎng)】14.物聯(lián)網(wǎng)設(shè)備控制器選擇 - MCU（單片機(jī)）

閱讀 2906·2021-10-14 09:42
一道常被人輕視的前端JS面試題

閱讀 3205·2019-08-30 15:52
如何修改移動(dòng)設(shè)備按鈕默認(rèn)樣式

閱讀 3333·2019-08-30 14:02
不一樣的ZTree，權(quán)限樹.js插件

閱讀 1132·2019-08-29 15:42
CSS揭秘之《背景圖案》

閱讀 562·2019-08-29 13:20
三欄布局總結(jié)

閱讀 1186·2019-08-29 12:24
JS學(xué)習(xí)筆記（第10章）（DOM操作技術(shù)）

閱讀 508·2019-08-26 10:20
簡(jiǎn)單好用的CSS命名規(guī)范和JS代碼風(fēng)格

閱讀 707·2019-08-23 18:31

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

對(duì)象的創(chuàng)建繼承

相關(guān)文章

創(chuàng)建對(duì)象(一)：創(chuàng)建與繼承

js繼承的理解

《javascript高級(jí)程序設(shè)計(jì)》繼承實(shí)現(xiàn)方式

JavaScript繼承方式詳解

徹底理解Javascript中的原型鏈與繼承

發(fā)表評(píng)論

0條評(píng)論

UCloud

男|高級(jí)講師

TA的文章

【物聯(lián)網(wǎng)】14.物聯(lián)網(wǎng)設(shè)備控制器選擇 - MCU（單片機(jī)）

一道常被人輕視的前端JS面試題

如何修改移動(dòng)設(shè)備按鈕默認(rèn)樣式

不一樣的ZTree，權(quán)限樹.js插件

CSS揭秘之《背景圖案》

三欄布局總結(jié)

JS學(xué)習(xí)筆記（第10章）（DOM操作技術(shù)）

簡(jiǎn)單好用的CSS命名規(guī)范和JS代碼風(fēng)格

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

對(duì)象的創(chuàng)建繼承

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！