本文主要和大家分享JS原型和原型鏈實例詳解，希望能幫助大家對JS原型和原型鏈有更清晰的認識。
建構函數（函數名首字母大寫）：類似一個模版
function Foo(name,age){
this.name = name;
this.age = age;
this.class = 'class1';
//return this;默认有这一行
}
var f = new Foo('zhangsan',20);
//var f1 = new Foo('lisi',22);创建多个对象建構函數- 擴充：（所有的引用型別都有建構子）
var a = {} 其實是var a = new Object()的語法糖
var a = [] 其實是var a = new Array()的語法糖
function Foo(){.. .} 其實是var Foo = new Function()
使用instanceof判斷一個函數是否是一個引用類型的建構子
*原型規則和範例：（原型規則是學習原型鏈的基礎）
5條原型規則：
-所有的引用型別（物件、陣列、函數），都具有物件特性，即可自由擴充屬性（除了'null'以外）
-所有的參考類型（物件、陣列、函數），都有一個__proto__（隱式原型）屬性，屬性值是一個普通的物件
-所有的函數都有一個prototype（顯示原型）屬性，屬性值也是一個普通的物件
-所有的引用型別（物件、陣列、函數），__proto__屬性值指向它的建構子的"prototype"屬性值, 即
var obj = {}; ==> var obj = new Object();
console.log(obj.__proto__ === Object.prototype)
# -當試圖得到一個物件的屬性時，如果這個物件本身沒有這個屬性，那麼會去它的__proto__（即它的建構子的prototype）中尋找
var item;
for(item in f){
//高级浏览器已经在 for in 中屏蔽了来自原型的属性
//但是在这里建议大家加上这个判断，保证程序的健壮性
if(f.hasOwnProperty(item)){
console.log(item);
}
}原型鏈：
寫一個封裝DOM查詢的範例：
function Elem(id){
this.elem = document.getElementById(id);
}
Elem.prototype.html = function(val){
var elem = this.elem;
if(val){
elem.innerHTML = val;
return this;//为了后边的链式操作
}else{
return elem.innerHTML;
}
}
Elem.prototype.on = function(type,fn){
var elem = this.elem;
elem.addEventListener(type,fn);
//如果添加return this,后边还可以接链式操作
}
var p1 = new Elem('p1');
//console.log(p1.html());//打印HTML即DOM结构；
//赋值内容并且绑定事件
p1.html('<p>hello imooc</p>');
p1.on('click',function(){
alert('clicked');
})
//链式操作
p1.html('<p>hello imooc</p>').on('click',function(){
alert('clicked');
}).html('<p>javascript</p>');
instanceof：
用来判断是否为该对象的构造函数
对象 instanceof Function/Array/Object;1.如何準確判斷一個變數是數組類型？
變數instanceof Array
2.寫一個原型鏈繼承的例子
//动物
function Animal(){
this.eat = function(){
console.log('animal eat');
}
}
//狗
function Dog(){
this.bark = function(){
console.log('dog bark');
}
}
Dog.prototype = new Animal();
//哈士奇
var hashiqi = new Dog();
3.描述new一个对象的过程
function Foo(){
this.name = name;
this.age = age;
this.class = 'class1'
//return this;
}
var f = new Foo('zhangsan',20);
//var f1 = new Foo('lisi',22);-建立一個新物件
-this.指向這個新物件
-執行程式碼，也就是對this賦值
-傳回this
4.zepto(或其他框架)原始碼中如何使用原型鏈？
-閱讀原始碼是高效提高技能的方式
-但不能「埋頭苦鑽」有技巧在其中
-慕課網搜尋「zepto設計和原始碼分析”
相關推薦：
學習javascript物件導向理解javascript原型與原型鏈_javascript技巧
以上是JS原型與原型鏈詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
