1. 程式人生 > >細說JS中的原型與原型鏈

細說JS中的原型與原型鏈

變量 proto var 概念 函數的原型 prot software 構造函數 eof

我們都知道,在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中的原型與原型鏈