理解javascript中的原型和原型鏈
原型
大家都知道，JavaScript 不包含傳統(tǒng)的類繼承模型，而是使用 prototype 原型模型。代碼實現(xiàn)大概是這樣子的
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對象中查找。這里我們用到了一個構(gòu)造函數(shù)Student
構(gòu)造函數(shù)、__proto__以及原型鏈
除了IE瀏覽器，其他瀏覽器都在Object對象的實例上，部署了一個非標準的__proto__屬性（前后各兩個下劃線），指向該對象的原型對象，即構(gòu)造函數(shù)的prototype屬性。
盜用一段代碼和一張圖
// 構(gòu)造方法
function Foo(y) {
this.y = y;
}
Foo.prototype.x = 10;
// 繼承方法"calculate"
Foo.prototype.calculate = function (z) {
return this.x + this.y + z;
};
// 使用foo模式創(chuàng)建 "b" and "c"
var b = new Foo(20);
var c = new Foo(30);
// 調(diào)用繼承的方法
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__指向的構(gòu)造b的構(gòu)造方法Foo的prototype屬性；而Foo.prototype也是一個對象，本身也有一個__proto__指向構(gòu)造其的構(gòu)造方法Object的prototype。Object.prototype的__proto__被指向了 null, 這就形成了一個原型鏈了。
這里還要能理解這樣一段代碼
Object instanceof Function //true Function instanceof Object //true
new做了什么
這里還有一個小問題，js里面普通函數(shù)和構(gòu)造函數(shù)形式上貌似沒有啥太大區(qū)別(首字母大寫不是必須的，但是通常都把構(gòu)造函數(shù)的首字母大寫)。new這個關(guān)鍵字到底做了什么東西。
比方
var Kimy = new Student();
new 做了三件事情
var Kimy = {};
Kimy.__proto__ = Student.prototype;
Student.call(Kimy);
1、定義了一個空對象
2、設(shè)置其原型
3、初始化對象
這樣就能理解為什么Kimy.__proto__指向的是Student.prototype了(同一個引用)，原來就是new在起著關(guān)鍵的作用！
以上就是本文的全部內(nèi)容，希望大家能夠喜歡。
相關(guān)文章
鍵盤控制事件應(yīng)用教程大全...2006-11-11
這篇文章主要介紹了參數(shù)傳遞的四種形式（URL,超鏈接,js,form表單）有需要的朋友可以參考下2015-07-07
JavaScript函數(shù)學(xué)習(xí)總結(jié)以及相關(guān)的編程習(xí)慣指南
這篇文章主要介紹了JavaScript函數(shù)學(xué)習(xí)總結(jié)以及相關(guān)的編程習(xí)慣指南,整理包含到了匿名函數(shù)和三元運算符等非常cool的知識點,需要的朋友可以參考下2015-11-11
在制作網(wǎng)頁的過程中需要引用很多的js文件，至于他正確位置好多的朋友就會有疑問了，接下來為大家詳細介紹下2013-04-04
下面小編就為大家?guī)硪黄狫S操作DOM的一些常用方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
詳解Javascript ES6中的箭頭函數(shù)(Arrow Functions)
箭頭函數(shù)，若有了解過coffeeScript的同學(xué)，或許對此印象深刻，因為它可以讓語法省略不少，特別是對于回調(diào)函數(shù)，會讓代碼更清晰簡潔。下面讓我們一起來學(xué)習(xí)學(xué)習(xí)ES6中的箭頭函數(shù)。2016-08-08
javascript高級選擇器querySelector和querySelectorAll全面解析
下面小編就為大家?guī)硪黄猨avascript高級選擇器querySelector和querySelectorAll全面解析。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-04-04
DHTML技術(shù)各項功能的實現(xiàn)都依賴于使用客戶端腳本與瀏覽器宿主及在宿主中輸出的Web頁面之間的交互，這種交互是通過對象這個技術(shù)手段實現(xiàn)的。2010-10-10
JavaScript CSS修改學(xué)習(xí)第二章 樣式
有時候你想看看文檔的默認樣式。比如，你的某個段落的寬度是50%，你想知道在用戶的瀏覽器中他的確切的像素是多少。2010-02-02
這篇文章主要介紹了JavaScript獲取各大瀏覽器信息圖示的相關(guān)資料,需要的朋友可以參考下2015-11-11