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