2 8深入擴充套件原型鏈模式常用的六種繼承方式

2022-09-05 04:39:12 字數 2925 閱讀 7489

1. for in 迴圈遍歷的時候,預設的話可以把自己私有的和在它所屬類原型上擴充套件的屬性和方法都可以遍歷到,但是一般情況下,我們遍歷乙個物件只需要遍歷私有的即可,我們可

以使用以下的判斷進行處理即可:

寫法一:

object.prototype.aaa =function(){}

var obj =

for (var key in

obj)

}

寫法二:(比較常用)

for (var key in obj) 

}

2.object.create(proobj) //建立乙個新的物件,但是還要把proobj作為這個物件的原型 // 不相容ie6-8

var obj =

}  var obj2 =object.create(obj);

obj2.getx();

obj.gety =function()

obj2.gety(); //2  此時說明object.create只是把obj2指向了obj的原型上,所以obj變了,obj2也跟著變了

function object

(o)

fn.prototype =o;

return

newfn;

}//object.create()的原理實現方法

3.1原型繼承

#div1.__proto__ ->htmldivelement.prototype ->htmlelement.prototype ->element.prototype ->node.prototype -> eventtarget.prototype ->object.prototype

function myobject () {}

myobject.prototype =,

tostring: function () {}

}  function myeventtarget () {}

myeventtarget.prototype = new

myobject();

myeventtarget.prototype.addeventlistener =function () {}

function mynode () {}

mynode.prototype = new

myeventtarget;

mynode.prototype.createelement =function () {}

var n = new mynode

原型繼承是我們js中最常用的一種繼承方式

子類b想要繼承父類a中的所有屬性和方法(私有+公有),只需要讓b.prototype = new a即可

原型繼承的特點:它是把父類中私有的+公有的都繼承到了子類原型上(子類公有的)

function a() 

a.prototype.getx =function ()

function b()

b.prototype = new

a   b.prototype.constructor = b; // 否則都指向父類

核心: 原型繼承並不是把父類中的屬性和方法轉殖乙份一模一樣的給b,而是讓b和a之間增加了原型鏈的連線,以後b的例項n想要a中的getx方法,需要一級級的向上查詢來使用

重寫:子類的例項,或者子類都可以通過原型鏈把父類原型的方法給改變了,對父類的其他例項也產生了影響,這就叫做重寫

3.2 call繼承:把父類私有的屬性和方法 轉殖乙份一模一樣的 作為子類私有的屬性

function a() 

a.prototype.getx =function ()   

function b()

var n = new

b;  console.log(n.x)

3.3 冒充物件繼承:把父類私有的加公有的轉殖乙份一模一樣的,給子類私有的

function a() 

a.prototype.getx =function ()   

function b()

temp = null;

}  var n = new b;

3.4 混合模式繼承:原型繼承+call繼承

function a () 

a.prototype.getx = function ()

function b()

b.prototype = new a //

b.prptotype: x=100 getx...

b.prototype.constructor = b;

3.5 寄生組合式繼承:子類的私有繼承父類的私有,子類的公有繼承父類的公有

function a () 

a.prototype.getx = function ()

function b()

b.prototype =object.create(a.prototype)

b.prototype.constructor =b;

//處理相容

function create (o)

fn.prototype =o

return

newfn  

}  var n = new b

3.6 中間類繼承法 -> 不相容ie(移動端可以)

function **gfn() {

arguments.__proto__ = array.prototype

arguments.sort()

arguments.pop()

原型鏈模式(深入)

案例一 普通 functionfn fn.prototype.getx function fn.prototype.gety function fn.prototype.getz function var f1 newfn 1 起乙個別名 把原來原型指向的位址賦值給我們的pro,現在他們操作的是同乙...

js 原型鏈的深入

1 ie11和谷歌 proto 指向的改變 改變指向 proto 的指向 var obj1 var obj2 object.create obj1 指定obj2的原型物件為obj1 console.log obj1.proto 原型鏈指向object.prototype console.log ob...

深入理解JavaScript的原型 原型鏈與繼承

在介紹原型是什麼之前,首先需要知道原型是做什麼用的,在js高設書中,明顯可以看到介紹有關原型的知識是在介紹建立物件的方式時提出來的,即使用原型模式來建立物件,顯而易見,原型這個概念是與建立物件聯絡在一起的。當然,建立物件的方式有很多種,如工廠模式,建構函式模式,以及與原型模式有關的其他模式等。我們建...