javascript 原型 和 原型鏈

  最近幾天,好些新同事來問原型,原型鏈啥的。自己做爲菜鳥的我好像也沒有好好整理過這個,這裏寫寫本身的理解。瀏覽器

  原型函數

  你們都知道,JavaScript 不包含傳統的類繼承模型,而是使用 prototype 原型模型。代碼實現大概是這樣子的this

function Student(name){
    this.name = name;
}
 
var Kimy = new Student("Kimy");
 
Student.prototype.say = function(){
    console.log(this.name + "say");
}

Kimy.say();
//Kimysay

  Kimy自己是沒有say方法的,當他在本身對象中找不到該方法時就回去他的原型中查找,也就是Student.prototype對象中查找。這裏咱們用到了一個構造函數Studentspa


  構造函數、__proto__以及原型鏈prototype

  除了IE瀏覽器,其餘瀏覽器都在Object對象的實例上,部署了一個非標準的__proto__屬性(先後各兩個下劃線),指向該對象的原型對象,即構造函數的prototype屬性。3d

盜用一段代碼和一張圖code

// 構造方法
function
Foo(y) { this.y = y; } Foo.prototype.x = 10; // 繼承方法"calculate" Foo.prototype.calculate = function (z) { return this.x + this.y + z; }; // 使用foo模式建立 "b" and "c" var b = new Foo(20); var c = new Foo(30); // 調用繼承的方法 b.calculate(30); // 60 c.calculate(40); // 80 console.log( b.__proto__ === Foo.prototype, // true c.__proto__ === Foo.prototype, // true b.constructor === Foo, // true c.constructor === Foo, // true Foo.prototype.constructor === Foo // true b.calculate === b.__proto__.calculate, // true b.__proto__.calculate === Foo.prototype.calculate // true );


 

  咱們能夠看到,每一個對象都是含有一個__proto__屬性,b的__proto__指向的構造b的構造方法Foo的prototype屬性;而Foo.prototype也是一個對象,自己也有一個__proto__指向構造其的構造方法Object的prototype。Object.prototype的__proto__被指向了 null, 這就造成了一個原型鏈了。對象

這裏還要能理解這樣一段代碼blog

Object instanceof Function
//true
Function instanceof Object
//true

  new作了什麼繼承

  這裏還有一個小問題,js裏面普通函數和構造函數形式上貌似沒有啥太大區別(首字母大寫不是必須的,可是一般都把構造函數的首字母大寫)。new這個關鍵字到底作了什麼東西。

比方

var Kimy = new Student();  

new 作了三件事情

var Kimy  = {}; 

Kimy.__proto__ = Student.prototype;

Student.call(Kimy);

一、定義了一個空對象

二、設置其原型

三、初始化對象

這樣就能理解爲何Kimy.__proto__指向的是Student.prototype了(同一個引用),原來就是new在起着關鍵的做用!

相關文章
相關標籤/搜索