JavaScript對象原型寫法詳解

    體現對象原型分步式寫法

//原型分步式寫法
//構造函數
function Person(){}
//對象原型
Person.prototype.name = 'Avensatr';
Person.prototype.age = '22';
Person.prototype.job = 'Software Engineer';
Person.prototype.sayName = function(){
    console.log(this.name);
}

 我問你答？？ 打印結果是？？

var person = new Person();
//__proto__隱式原型與顯式原型Person.prototype
console.log(person.__proto__);
console.log(Person.prototype);
//構造函數（對象原型構造用於構造對象）
console.log(Person.prototype.constructor);
console.log(Person.prototype.constructor === Person); 
//構造函數原型
console.log(Person.prototype.constructor.prototype); 
//對象原型
console.log(Person.prototype.__proto__);
//構造函數是由function Function(){}建立
console.log(Person.prototype.constructor.__proto__);
console.log(person.__proto__ === Person.prototype);

理清上述（實例與構造原型對象關聯關係）打印結果後，見圖解以下

完整圖解應以下

Person.prototype只是對象指針引用，真正建立對象的是Person.prototype.constructor.prototype 構造函數原型

每一個建立一個函數都有prototype屬性,該函數prototype屬性指向一個該函數建立的對象.即 Person.prototype.constructor.prototype

實例對象之間經過「__proto_隱式原型」與構造函數原型對象「Person.prototype」之間相關聯 即person.__proto__ === Person.prototype

instanceof 用於檢測對象與實例之間關係

person instanceof  Person 沿着原型鏈person.__proto__與Person.prototype查找，若兩條線能找到同一個引用，即同一個對象，則返回true,不然返回false

    體現對象原型封裝的寫法

//原型集中寫法
function Person(){}
var friends = new Person();//建立一個實例對象
Person.prototype = {
    name : "Avensatr",
    age : "22",
    job : "Software Engineer",
    sayName : function(){
         console.log(this.name);
    }
}

 這種面向對象快捷寫法 Person.prototype = {} 與上述對象原型分步式寫法有所區別；本質體如今原型的重寫上

Person.prototype.constrctor 再也不指向 function Person(){} 而指向新的function Object() { [native code] }函數

打印結果以下圖

   匿名函數自執行封裝對象原型方法

function Person(){}
Person.prototype = (function () {
    var setName = function (name) {
         return name;
    },
    setAge = function (age) {
         return age;
    },
    setJob = function (job) {
         return job;
    };
    return {
        setName : setName,
        setAge : setAge,
        setJob : setJob
    }
})();

匿名函數自執行與體現對象原型封裝的寫法原理是同樣的，這裏再也不贅述　　

做者：Avenstar

出處：http://www.cnblogs.com/zjf-1992/p/6622444.html

關於做者：專一於前端開發

本文版權歸做者全部,轉載請標明原文連接

【資料參考】

http://www.sxrczx.com/docs/js/2305453.html

JavaScript高級程序設計(第三版)