細說JS中的原型與原型鏈
我們都知道,在javascript中,萬物皆對象。但是,對象也是有區別的,分為普通對象和函數對象,說明走一波!
var o1 = {}; var o2 =new Object(); var o3 = new f1(); function f1(){}; var f2 = function(){}; var f3 = new Function(‘str‘,‘console.log(str)‘);
如果我們對上面的變量進行console.log(typeof)的話,我們可以看到,o開頭的結果都為object,f開頭的結果為function!
一定要區分出函數對象和普通對象,下面會用到這個概念。
構造函數
function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = function() { alert(this.name) } } var person1 = new Person(‘Zaxlct‘, 28, ‘Software Engineer‘); var person2 = new Person(‘Mick‘, 23, ‘Doctor‘);
重點來了,person1和person2都是Person的實例,這兩個實例都有一個constructor(構造函數)屬性,該屬性是一個指針,指向Person!
console.log(person1.constructor);
console.log(person2.constructor);
//打印結果都為
// function Person(name, age, job) { // this.name = name; // this.age = age; // this.job = job; // this.sayName = function() { alert(this.name) } }
所以可以得出第一個結論
person1.constructor === Person;
person2.constructor === Person;
Person是構造函數,person1和person2都是Person的實例
實例的構造函數屬性(constructor)指向構造函數
原型對象
在javascript中,每當定義一個對象(函數也是對象),對象都會包含一些預定義的屬性,其中每個函數對象都有一個prototype屬性,這個屬性指向函數的原型對象,所以反過來粗暴一點說,原型對象就是函數的prototype這個屬性所指的對象,函數的對象的prototype的屬性就是這個函數的原型對象。
不要慌,走個例子來個再來個總結就明白了
Person.prototype = { name: ‘Zaxlct‘, age: 28, job: ‘Software Engineer‘, sayName: function() { alert(this.name); } }
這就是原型對象,明白嗎,然後我們給這個原型對象添加很多很多的屬性和sayName這個方法,當然,他還有一個對象constructor
默認情況下,所有的原型對象,都會自動獲得一個constructor(構造函數)這個屬性,這個屬性是一個指針,指向prototype屬性所在的函數Person!
Person.prototype.constructor === Person
.和上面有點相似,千萬不要混!
下面有個更混的,我們可以根據公式
person1.constructor == Person Person.prototype.constructor == Person
細說JS中的原型與原型鏈