深入淺析js原型鏈和vue構造函數

2019-11-19 12:38:12

字體：大中小

來源：轉載

供稿：網友

一、什么是原型鏈?

簡單回顧下構造函數,原型和實例的關系:

每個構造函數(constructor)都有一個原型對象(prototype),原型對象都包含一個指向構造函數的指針,而實例(instance)都包含一個指向原型對象的內部指針.

然鵝,在js對象里有這么一個規則:

　　如果試圖引用對象(實例instance)的某個屬性,會首先在對象內部尋找該屬性,直至找不到,然后才在該對象的原型(instance.prototype)里去找這個屬性.

少廢話,先來看個例子:

function Fun1 () {  this.win = "skt" } Fun1.prototype.getVal = function () {  return this.win } function Fun2 () {  this.other_win = "rng" } Fun2.prototype = new Fun1 () Fun2.prototype.getOtherVal = function () {  return this.other_win } let instance = new Fun2() console.log(instance.getVal()) //skt

在上述例子中,有一個很有意思的操作,我們讓原型對象指向了另一個類型的實例,即: constructor1.property = instance2

那么他是怎么找到instance.getVal()的?這中間又發生了什么?

　　1).首先會在instance1內部屬性中找一遍;

　　2).接著會在instance1.__proto__(constructor1.prototype)中找一遍,而constructor1.prototype 實際上是instance2, 也就是說在instance2中尋找該屬性;

　　3).如果instance2中還是沒有,此時程序不會灰心,它會繼續在instance2.__proto__(constructor2.prototype)中尋找...直至Object的原型對象

搜索軌跡: instance1--> instance2 --> constructor2.prototype…-->Object.prototype

這種搜索的軌跡,形似一條長鏈, 又因prototype在這個游戲規則中充當鏈接的作用,于是我們把這種實例與原型的鏈條稱作原型鏈

二、prototype 和 __proto__ 都是個啥?

1.prototype是函數才有的屬性

 let fun = function () {} console.log(fun.prototype) // object console.log(fun.__proto__) // function

2.__proto__是對象具有的屬性,但__proto__不是一個規范的屬性,對應的標準屬性是 [[Prototype]]

 let obj = {} console.log(obj.prototype) // underfined console.log(obj.__proto__) // object

我們可以把__proto__理解為構造器的原型,大多數情況下 __proto__ === constructor.prototype ( Object.create()除外 )

三、new又是個什么鬼?

我們都知道new是一個實例化的過程,那么他是怎么實例化的?下面我們來看一個簡單的例子:

 function Fun() {  this.team = "rng" } let f = new Fun() console.log(f.team) // rng

上述代碼中,我們通過new命令實例化了一個叫Fun的函數并賦值給f,這個新生成的實例對象f從構造函數Fun中得到了team屬性,其實構造函數內部的this,就代表了新生成的實例對象,所以我們打印f.team的值就取到了rng這個值

這又是哪門子原理?答案如下?

1.創建一個空對象，作為將要返回的對象實例。
2.將這個空對象的原型，指向構造函數的prototype屬性。
3.將這個空對象賦值給函數內部的this關鍵字。
4.開始執行構造函數內部的代碼

也就是說，構造函數內部，this指的是一個新生成的空對象，所有針對this的操作，都會發生在這個空對象上。這也是為什么構造函數叫"構造函數"的原因，就是操作一個空對象（即this對象），將其“構造”為所需要的樣子。

如果我不加new呢?

 function Fun() {  this.team = "rng" } let f = Fun() console.log(f) // undefined console.log(team) // rng

我們可以看出上面打印f為undefined,而team卻有值,這又是為什么?

其實在這種情況下,構造函數就變成了普通的函數,而且不會被實例.而此時的this指向了全局,team就變成了全局變量,因此我們取到了值

四、 __proto__指向哪?

　　說到__proto__的指向問題,還得取決于該對象創建時的實現方式.

　　辣么,到底有那些實現方式?

1.字面量方式

 let obj = {} console.log(obj.__proto__) // object console.log(obj.__proto__ === obj.constructor.prototype) // true 證明用字面量創建的函數,他的__proto__ 等于 該對象構造器的原型

2.構造器方式

 function Func () {} let a = new Func() console.log(a.__proto__) // object console.log(a.__proto__ === a.constructor.prototype) // true

3.Object.create()方式

 let obj1 = {name:"rng"} let obj2 = Object.create(obj1) console.log(obj2.__proto__) //{name: "rng"} console.log(obj2.__proto__ === obj2.constructor.prototype) // false

　　注: Object.create(prototype, descriptors) 創建一個具有指定原型且可選擇性地包含指定屬性的對象

五、如何確定原型和實例的關系?

　　想要確定原型和實例的關系,坦率的講,有兩種方式: instance 和 isPrototype()

1.instanceof

　　我們用這個操作符來測試實例(instance)與原型鏈中出現過的構造函數,如果出現過則返回true,反之則為false

　　來來來,我們來測試一下:

 function Fun1 () {  this.laji = "uzi" } function Fun2 () {  this.strong = "faker" } Fun2.prototype = new Fun1() let fun2 = new Fun2 () console.log(fun2 instanceof Fun1) // true console.log(fun2 instanceof Fun2) // true console.log(fun2 instanceof Object) // true

由于原型鏈的關系,我們可以說fun2是一個對象Object,Fun1或是Fun2中任何一個類型的實例,所以這三個結果都返回了true

2.isPrototype()

　　這個方法同樣,只要是原型鏈中出現過的原型,該方法就會返回true,用法如下

 console.log(Fun1.prototype.isPrototypeOf(fun2)) // true console.log(Fun2.prototype.isPrototypeOf(fun2)) // true console.log(Object.prototype.isPrototypeOf(fun2))// true

六、原型鏈的問題

　　什么?原型鏈還有問題?買了佛冷,why?

　　原因一: 當原型鏈中包含引用類型值的原型時,該引用類型值會被所有實例共享;

　　原因二:在創建子類型時,不能向超類型的構造函數中傳遞參數.

七、如何解決原型鏈問題?

1.借用構造函數,也叫經典繼承

　　基本思想: 在子類型構造函數的內部調用超類型構造函數

　　函數只是在特定環境中執行的代碼的對象，因此通過使用 apply() 和 call() 方法也可以在（將來）新創建的對象上執行構造函數

看例子:

 function Father () {  this.team = ["letme","mlxg"] } function Son () {  Father.call(this) } let son = new Son() son.team.push("uzi") console.log(son.team)  // ["letme", "mlxg", "uzi"] let little_son = new Son()  console.log(little_son.team) // ["letme", "mlxg"]

我們可以看出,借用構造函數一舉解決了原型鏈的兩大問題:

　　其一, 保證了原型鏈中引用類型值的獨立,不再被所有實例共享;

　　其二, 子類型創建時也能夠向父類型傳遞參數.

但是還還還有一個問題,如果僅僅借用構造函數,那么將無法避免構造函數模式存在的問題:

　　方法都在構造函數中定義, 因此函數復用也就不可用了.而且超類型(如Father)中定義的方法,對子類型而言也是不可見的. so,借用構造函數的技術也很少單獨使用.

2.組合繼承

　　組合繼承, 有時候也叫做偽經典繼承,指的是將原型鏈和借用構造函數的技術組合到一塊,從而發揮兩者優點的一種繼承模式.

　　基本思想: 使用原型鏈實現對原型屬性和方法的繼承,通過借用構造函數來實現對實例屬性的繼承.

　　這樣,既通過在原型上定義方法實現了函數復用,又能保證每個實例都有它自己的屬性.

接著看例子:

function Father (team) {  this.team = team  this.people = ["mlxg","letme"] } Father.prototype.sayTeam = function () {  return console.log(this.team) } function Son (team,age) {  this.age = age  Father.call(this,team) } Son.prototype = new Father() Son.prototype.sayAge = function () {  return console.log(this.age) } let son = new Son("faker",8) son.people.push("uzi") console.log(son.people) // ["mlxg", "letme", "uzi"] son.sayAge()    //8 son.sayTeam()    // faker let little_son = new Son("bang",3) console.log(little_son.people) // ["mlxg", "letme"]  little_son.sayAge()    // 3 little_son.sayTeam()   // bang

　　我們可以看出,組合繼承既保證了引用類型不再被所有實例所共享,也能夠讓子類型創建時向父類型傳參,同時,原型中的方法又能夠被復用,可以說是避免了原型鏈中的兩大問題以及借用構造函數的缺陷,因此他也是js中最常用的繼承方式,而且

instanceof 和 isPrototypeOf( )也能用于識別基于組合繼承創建的對象.

3.原型繼承

　　基本思想: 借助原型可以基于已有的對象創建新對象，同時還不必因此創建自定義類型

　　繩么意思?

　　比如我們在fun()函數內部, 先創建一個臨時性的構造函數, 然后將傳入的對象作為這個構造函數的原型,最后返回了這個臨時類型的一個新實例.

 function fun(o){   function F(){}   F.prototype = o;   return new F();  }  let obj = {arr:[11,22]  fun(obj).arr.push(33)  console.log(fun(obj).arr) // [11,22,33]

　　在這個例子中,可以作為另一個對象基礎的是obj對象,于是我們把它傳入到fun()函數中,然后該函數就會返回一個新對象. 這個新對象將arr作為原型,因此它的原型中就包含引用類型值屬性. 然后我們向該屬性中又增加了一個元素,所以我們能夠將它打印出來

*在原型繼承中, 包含引用類型值的屬性始終都會共享相應的值, 就像使用原型模式一樣.

4.寄生式繼承

　　基本思想:創建一個僅用于封裝繼承過程的函數,該函數在內部以某種方式來增強對象,最后再像真的是它做了所有工作一樣返回對象

 function fun(o){  function F(){}  F.prototype = o;  return new F(); } let obj = {a:[11,22]} function createAnother(z) {  // 通過調用函數創建一個新對象  var clone = fun(z);  clone.sayHi = function () {   alert("hi");  }  return clone; }　　　　createAnother(obj)

　　上面的例子中,我們把obj傳入createAnother()函數中,返回的新對象clone不僅擁有了該屬性,而且還被增強了,擁有了sayHi()方法;

　　等一下,這里要注意: 使用寄生式繼承來為對象添加函數, 會由于不能做到函數復用而降低效率;這一點與構造函數模式類似.

5.寄生組合式繼承

　　前面講過,組合繼承是 JavaScript 最常用的繼承模式; 不過, 它也有自己的不足. 組合繼承最大的問題就是無論什么情況下,都會調用兩次父類構造函數: 一次是在創建子類型原型的時候, 另一次是在子類型構造函數內部. 寄生組合式繼承就是為了降低調用父類構造函數的開銷而誕生的

　　基本思想:不必為了指定子類型的原型而調用超類型的構造函數

 function inheritPrototype(subType, superType) {  var protoType = Object.create(superType.prototype); //創建對象  protoType.constructor = subType;      //增強對象  subType.prototype = protoType;       //指定對象 } function Father(name) {  this.name = name;  this.colors = ["red", "blue", "green"]; } Father.prototype.sayName = function () {  console.log(this.name); } function Son(name, age) {  Father.call(this, name);  this.age = age; } inheritPrototype(Son, Father) Son.prototype.sayAge = function () {  console.log(this.age); } var instance = new Son("uzi", 3); instance.sayName(); //uzi instance.sayAge(); //3

　　inheritPrototype函數接收兩個參數：子類型構造函數和超類型構造函數。

　　　　1. 創建超類型原型的副本。

　　　　2. 為創建的副本添加constructor屬性，彌補因重寫原型而失去的默認的constructor屬性

　　　　3. 將新創建的對象（即副本）賦值給子類型的原型

　　inheritPrototype的高效率體現在它沒有調用superClass構造函數,因此避免了在subClass.prototype上面創建不必要多余的屬性. 同時,原型鏈還能保持不變,可以說是相當奈斯

　　由于寄生組合式繼承,集寄生式繼承和組合繼承的優點于一身,是實現基于類型繼承的最有效方法.

八.vue構造函數

我們在使用的vue的時候,經常會用new操作符去將他實例化,這說明vue也是一個構造函數,那么他是如何被創建的呢?我懷著無比激動的心情clone了vue的源碼,仔細研究了一番

vue源碼地址

我首先找到了src/core/instance/index.js文件,打開一看,驚了