prototype

參考鏈接

mdn constructor

一張圖理解JS的原型（prototype、proto、constructor的三角關(guān)系）

關(guān)鍵詞

構(gòu)造函數(shù)、實(shí)例對(duì)象、原型對(duì)象、prototype、constructor、_proto_

四個(gè)總結(jié)

1. javascript只有一種結(jié)構(gòu)：對(duì)象，萬(wàn)物皆對(duì)象
2. javascript并沒(méi)有類的概念
3. 有一種機(jī)制，將所有對(duì)象聯(lián)系起來(lái)，原型鏈
4. 確定對(duì)象，對(duì)象對(duì)應(yīng)的構(gòu)造函數(shù)，構(gòu)造函數(shù)對(duì)應(yīng)的原型對(duì)象

常用概念

構(gòu)造函數(shù)：用來(lái)初始化新創(chuàng)建的對(duì)象的函數(shù)是構(gòu)造函數(shù)。在例子中，Tree()函數(shù)是構(gòu)造函數(shù)。

實(shí)例對(duì)象：通過(guò)構(gòu)造函數(shù)的new操作創(chuàng)建的對(duì)象是實(shí)例對(duì)象。可以用一個(gè)構(gòu)造函數(shù)，構(gòu)造多個(gè)實(shí)例對(duì)象。

原型對(duì)象及prototype：構(gòu)造函數(shù)有一個(gè)prototype屬性，指向?qū)嵗龑?duì)象的原型對(duì)象。通過(guò)同一個(gè)構(gòu)造函數(shù)實(shí)例化的多個(gè)對(duì)象具有相同的原型對(duì)象。經(jīng)常使用原型對(duì)象來(lái)實(shí)現(xiàn)繼承。

constructor：原型對(duì)象有一個(gè)constructor屬性，指向該原型對(duì)象對(duì)應(yīng)的構(gòu)造函數(shù)。由于實(shí)例對(duì)象可以繼承原型對(duì)象的屬性，所以實(shí)例對(duì)象也擁有constructor屬性，同樣指向原型對(duì)象對(duì)應(yīng)的構(gòu)造函數(shù)。

_proto_：實(shí)例對(duì)象有一個(gè)proto屬性，指向該實(shí)例對(duì)象對(duì)應(yīng)的原型對(duì)象。

//構(gòu)造函數(shù) Tree()
function Tree(name) {
   this.name = name;
}
//實(shí)例對(duì)象 theTree
var theTree = new Tree("Redwood");
//原型對(duì)象
console.log( "Tree.prototype: " + Tree.prototype);
//實(shí)例對(duì)象引用constructor原理，通過(guò)theTree的_proto_屬性指向該實(shí)例對(duì)象對(duì)應(yīng)的原型對(duì)象
console.log( "theTree.constructor: " + theTree.constructor);
//實(shí)例對(duì)象的_proto_
console.log( "theTree._proto_: " + theTree._proto_);

prototype

每個(gè)函數(shù)都有 prototype 屬性，除了 Function.prototype.bind()，該屬性指向原型。

每個(gè)對(duì)象都有 __proto__ 屬性，指向了創(chuàng)建該對(duì)象的構(gòu)造函數(shù)的原型。其實(shí)這個(gè)屬性指向了 [[prototype]]，但是 [[prototype]] 是內(nèi)部屬性，我們并不能訪問(wèn)到，所以使用 proto 來(lái)訪問(wèn)。

對(duì)象可以通過(guò) __proto__ 來(lái)尋找不屬于該對(duì)象的屬性，proto 將對(duì)象連接起來(lái)組成了原型鏈。

//構(gòu)造函數(shù)
function Tree(name) {
  this.name = name;
}
//
var theTree = new Tree("Redwood");
console.log( "theTree.constructor is " + theTree.constructor.name );

constructor

原型對(duì)象有一個(gè)constructor屬性，指向該原型對(duì)象對(duì)應(yīng)的構(gòu)造函數(shù)。由于實(shí)例對(duì)象可以繼承原型對(duì)象的屬性，所以實(shí)例對(duì)象也擁有constructor屬性，同樣指向原型對(duì)象對(duì)應(yīng)的構(gòu)造函數(shù)。

theTree的原型對(duì)象為Tree.prototype，theTree可以通過(guò) __proto__來(lái)尋找不屬于theTree的屬性constructor

任何對(duì)象都有 __proto__ 屬性，指向了創(chuàng)建該對(duì)象的構(gòu)造函數(shù)的原型

//構(gòu)造函數(shù)
function Tree(name) {
   this.name = name;
}
//原型對(duì)象
var theTree = new Tree("Redwood");
console.log( "theTree.constructor is " + theTree.constructor ); //指向Tree
console.log(theTree.constructor === Tree); //原型對(duì)象有的constructor屬性，指向該原型對(duì)象對(duì)應(yīng)的構(gòu)造函數(shù)
console.log(theTree.__proto__ === Tree.prototype); //原型對(duì)象有的__proto__屬性，指向該構(gòu)造函數(shù)的原型對(duì)象

函數(shù)和對(duì)象的關(guān)系

函數(shù)

函數(shù)(Function也是函數(shù))是new Function的結(jié)果，所以函數(shù)可以作為實(shí)例對(duì)象，其構(gòu)造函數(shù)是Function()，原型對(duì)象是Function.prototype。

分析：確定對(duì)象，對(duì)象對(duì)應(yīng)的構(gòu)造函數(shù)，構(gòu)造函數(shù)對(duì)應(yīng)的原型對(duì)象

    //構(gòu)造函數(shù)1
    function Tree(name) {
       this.name = name;
    }
    //構(gòu)造函數(shù)2
    var Tree2 =  new Function('name','this.name = name;')
    //原型對(duì)象
    console.log("Tree.constructor is " + Tree.constructor); //指向Tree對(duì)象對(duì)應(yīng)的構(gòu)造函數(shù)Function
    console.log(Tree.constructor === Function); //
    console.log(Tree.__proto__ === Function.prototype); //Tree對(duì)象有__proto__屬性，指向Tree的構(gòu)造函數(shù)Function的原型對(duì)象

對(duì)象

對(duì)象(函數(shù)也是對(duì)象)是new Object的結(jié)果，所以對(duì)象可以作為實(shí)例對(duì)象，其構(gòu)造函數(shù)是Object()，原型對(duì)象是Object.prototype。

分析：確定對(duì)象，對(duì)象對(duì)應(yīng)的構(gòu)造函數(shù)，構(gòu)造函數(shù)對(duì)應(yīng)的原型對(duì)象

    //構(gòu)造函數(shù)1
    function Tree(name) {
       this.name = name;
    }
    //構(gòu)造函數(shù)2
    var Tree2 =  new Function('name','this.name = name;')
    //原型對(duì)象
    console.log("Tree.constructor is " + Tree.constructor); //指向Tree對(duì)象對(duì)應(yīng)的構(gòu)造函數(shù)Function
    console.log(Tree.constructor === Function); //
    console.log(Tree.__proto__ === Function.prototype); //Tree對(duì)象有__proto__屬性，指向Tree的構(gòu)造函數(shù)Function的原型對(duì)象

Object.prototype的原型對(duì)象是null。

原型結(jié)構(gòu)圖

[圖片上傳失敗...(image-1532e3-1557498333794)]