這篇文章介紹了javascript中的原型和原型鏈,需要的朋友可以參考下。
原型
大家都知道,JavaScript 不包含傳統的類別繼承模型,而是使用 prototype 原型模型。程式碼實現大概是這樣子的
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對象中查找。這裡我們用到了一個建構子Student
建構子、__proto__以及原型鏈
除了IE瀏覽器,其他瀏覽器都在Object對象的實例上,部署了一個非標準的__proto__屬性(前後各兩個下劃線),指向該對象的原型對象,即建構函數的prototype屬性。
盜用一段程式碼和一張圖
// 构造方法 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, 這就形成了一個原型鏈了。
這裡還要能理解這樣一段程式碼:
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);
1.定義了一個空物件
2、設定其原型
3、初始化物件
這樣就能理解為什麼Kimy.__proto__指向的是Student.prototype了(同一個引用),原來就是new在起著關鍵的作用!
以上就是本文的全部內容,希望大家能夠喜歡,更多相關教學請上JavaScript影片教學!