首頁 > 文章 > web前端 > JS原型與原型鏈詳解

JS原型與原型鏈詳解

小云云原創: 2018-03-07 14:29:271610瀏覽

本文主要和大家分享JS原型和原型鏈實例詳解，希望能幫助大家對JS原型和原型鏈有更清晰的認識。

建構函數（函數名首字母大寫）：類似一個模版

function Foo(name,age){
this.name = name;
this.age = age;
this.class = &#39;class1&#39;;
//return this;默认有这一行
}
var f = new Foo(&#39;zhangsan&#39;,20);
//var f1 = new Foo(&#39;lisi&#39;,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(&#39;p1&#39;);
//console.log(p1.html());//打印HTML即DOM结构；
//赋值内容并且绑定事件
p1.html(&#39;<p>hello imooc</p>&#39;);
p1.on(&#39;click&#39;,function(){
alert(&#39;clicked&#39;);
})
//链式操作
p1.html(&#39;<p>hello imooc</p>&#39;).on(&#39;click&#39;,function(){
alert(&#39;clicked&#39;);
}).html(&#39;<p>javascript</p>&#39;);
instanceof：
用来判断是否为该对象的构造函数
对象 instanceof Function/Array/Object;

1.如何準確判斷一個變數是數組類型？

變數instanceof Array

2.寫一個原型鏈繼承的例子

//动物
function Animal(){
this.eat = function(){
console.log(&#39;animal eat&#39;);
}
}
//狗
function Dog(){
this.bark = function(){
console.log(&#39;dog bark&#39;);
}
}
Dog.prototype = new Animal();
//哈士奇
var hashiqi = new Dog();
3.描述new一个对象的过程
function Foo(){
this.name = name;
this.age = age;
this.class = &#39;class1&#39;
//return this;
}
var f = new Foo(&#39;zhangsan&#39;,20);
//var f1 = new Foo(&#39;lisi&#39;,22);

-建立一個新物件

-this.指向這個新物件

-執行程式碼，也就是對this賦值

-傳回this

4.zepto(或其他框架)原始碼中如何使用原型鏈？

-閱讀原始碼是高效提高技能的方式

-但不能「埋頭苦鑽」有技巧在其中

-慕課網搜尋「zepto設計和原始碼分析”

JS原型與原型鏈詳解

相關文章