天天看點

弄懂js原型鍊-對象建立

建立對象幾種方法

第一種方式:字面量

var o1 = {name: 'o1'};
     var o2 = new Object({name: 'o2'});           

第二種方式:構造函數

var M = function (name) { this.name = name; };
     var o3 = new M('o3');           

第三種方式:Object.create

var p = {name: 'p'};
     var o4 = Object.create(p);

     M.prototype.say = function () {
         console.log('say hi');
     };
     var o5 = new M('o5');           

new 運算符的工作原理

var new2 = function (func) {
//生成一個新對象  繼承自構造函數的原型對象 
       var o = Object.create(func.prototype);
//  執行構造函數  轉移上下文
       var k = func.call(o);
       if (typeof k === 'object') {
           return k;
       } else {
           return o;
       }
   };           

var o4 = Object.create(p) 是通過原型鍊來連結的 o4.__proto__ === p ===》true

o4其實是一個空對象,并沒有name這個屬性,他是通過原型鍊來連結到p 找到name屬性,是以和上面三個不同

原型,構造函數,執行個體,原型鍊

  1. 對象就是執行個體 函數的執行個體都是對象,對象就有__proto__屬性 擷取它的原型對象 函數的原型對象是function的原型 也就是說 M 是function的執行個體

    M.__proto__.constructor=== Function ===>true

M.__proto__ === Function.prototype ===>true

  1. new 運算符操作的函數 就是構造函數 構造函數可以可以根據prototype 擷取它的執行個體的原型對象

    o3.__proto__=== M.prototype ==>true

  2. 任何函數都可以是構造函數,隻要用 new 去操作它 ,沒有就是普通函數 函數才有prototype 對象沒有

    原型對象可以通過constructor擷取對應的構造函數

M.prototype.constructor === M ==>true

o3 instanceof M ==> true

o3.__proto__.constructor ===M ==>true

  1. Object 既是一個對象 也是一個構造函數 Object.prototype 獲得原型鍊的頂端

    o3.__proto__.__proto__===Object.prototype ===》true

  2. 原型鍊的作用 ,可以給共同原型鍊對象添加方法,其他對象都可以獲得這個方法

    M.prototype.say = function () {

    console.log('say hi');
      };           
    o3.say() say hi

o5.say() say hi

o3對象會通過 .__proto__.__proto__去找它的原型鍊對象是否有這個方法如果有則執行 都沒有就報錯

instanceof的原理

  1. 執行個體 instanceof 構造函數 就是判斷執行個體.__proto__ === 構造函數.prototype 兩邊得到都是原型對象 看它是否是同一個引用
  2. instanceof Object ==>true

o3.__proto__ ===M.prototype ==>true

M.prototype._proto_ ===Object.prototype ==>true

o3.__proto__.__proto__ ===Object.prototype ==>true

  1. new運算符
//new 運算符的工作原理
      var new2 = function (func) {
   //生成一個新對象  繼承自構造函數的原型對象 
          var o = Object.create(func.prototype);
   //  執行構造函數  轉移上下文
          var k = func.call(o);
          //判斷構造函數傳回的是不是一個對象
          if (typeof k === 'object') {
              return k;
          } else {
              return o;
          }           

驗證 new2 是否和 new 一個效果

o6 = new2(M);

M {name: undefined}

o6.__proto__=== M.prototype

true

o6.__proto__.constructor ===M

o6 instanceof M

繼續閱讀