1. 程式人生 > >JS基礎知識(2)-原型

JS基礎知識(2)-原型

每個函式都有 prototype 屬性,除了 Function.prototype.bind(),該屬性指向 原型。 

每個物件都有 __proto__ 屬性,指向了建立該物件的建構函式的原型。其實這個 屬性指向了 [[prototype]],但是 [[prototype]] 是內部屬性,我們並不能訪問到, 所以使用 _proto_ 來訪問。 物件可以通過 __proto__ 來尋找不屬於該物件的屬性,__proto__ 將物件連線起 來組成了原型鏈。 

一個物件除了自身的顯示屬性外還隱含一個_proto_屬性,這個屬性指向建立該物件的建構函式的原型。

如:

let foo={ //內部也是使用了 new Object() 
   x: 10,
   y: 20
}

假設擁有兩個物件,它們之間只有一小部分不同,其他部分都相同。顯然,我們將會重用相似的功能/程式碼,如下calculate函式以及變數x為對b,c公用,則可以

var a = {
      x: 10,
     calculate: function (z) {
        return this.x + this.y + z
      }
 
};

var b = {
  y: 20,
  __proto__: a
};

var c = {
  y: 30,
  __proto__: a
};

通過建構函式來實現相同部分,也就是用建構函式來代替上述a的功能


function Foo(y) { // function 就是個語法糖 內部等同於 new Function() 

  this.y = y;
}

Foo.prototype.x = 10;

Foo.prototype.calculate = function (z) {
  return this.x + this.y + z;
};

var b = new Foo(20);
var c = new Foo(30);

程式碼關係如下圖: 

 

每個物件都有一個原型。建構函式Foo也有自己的__proto__,值為Function.prototypeFunction.prototype也通過其__proto__屬性關聯到Object.prototype

物件可以通過 __proto__ 來尋找不屬於該物件的屬性,__proto__ 將物件連線起 來組成了原型鏈。 

在ES6中有了類:

class Foo {
constructor(name) {
this._name = name;
}
  getName() {
    return this._name;
  }
}

class Bar extends Foo {
  getName() {
    return super.getName() + ' Doe';
  }
}

var bar = new Bar('John');
console.log(bar.getName()); // John Doe