構造函數、原型鏈、原型對象、構造器的理解

一、構造函數、實例化對象

function Person(name) {
    this.name = name;
}
var person1 = new Person('xiaoming');
var person2 = new Person('xiaoli');


function後面的方法名 Person 就是一個構造函數,一般首字母大寫,需要new實例化;

new之後的對象就是實例化對象,此處的person1,person2就是實例化對象;

 

二、構造器constructor,原型prototype每個對象都有一個constructor屬性,指向這個對象所在的構造函數,如下:


person1.constructor == Person;
person2.constructor == Person;


Person.prototype 是Person的原型"對象",所以這個對象也有constructor屬性,同樣指向Person,所以

Person.prototype.constructor == Person;


可得三者是等同關係,並且都等於Person:

person1.constructor == person2.construtor;
person1.constructor == Person.prototype.constructor;
person2.constructor == Person.prototype.constructor;

三、原型鏈__proto__

每個對象都有一個 __proto__ 屬性指向創建它的構造函數的原型,如下:

person1.__proto__ == Person.prototype;
person2.__proto__ == Person.prototype;


Person本身是一個構造"函數",那麼創建它的構造函數就是一個Function,所以

Person.__proto__ == Function.prototype;


Person.prototype 是一個原型"對象",那麼創建它的構建函數就是一個Object,所以

Person.prototype.__proto__ == Object.prototype;


換個構造函數名字一樣的道理:

var example= new Object();
example.constructor == Object;
example.__proto__ == Object.prototype;
Object.__proto__ == Function.prototype;
Object.prototype.__proto__ == Object.prototype;
//當原型的__proto__屬性等於該原型的時候,就說明指向到了最頂層的對象null;所以可得:
Object.prototype.__proto__ null && == Object.prototype == null;


四、補充

1、Math和JSON是以對象存在的,所以

Math.__proto__ === Object.prototype;
JSON.__proto__ === Object.prototype;


2、Function.prototype是唯一一個typeof Function.prototype == "function"的原型,其他構造器的原型都是object

typeof Function.prototype == "function";


3、重寫會導致constructor指向發生改變

function Person() {
}
Person.prototype.name = "小明";
 
 
person1 = new Person();
person1.constructor.prototype.name = "小花";
console.log(Person.prototype.name, person1.constructor === Person);// 小花 true
 
person1 = {//這裏已經屬於重寫構造函數了
    getName: function(){
        console.log("獲取姓名");
    }
}
console.log(Person.prototype.name, person1.constructor === Person, person1.constructor === Object);// 小花 false true

END

發佈了35 篇原創文章 · 獲贊 17 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章