2020-3-18 前端達(dá)人
前言
在學(xué)習(xí)JS中的原型，原型鏈，繼承這些知識(shí)之前，我們先學(xué)習(xí)下基礎(chǔ)知識(shí)：函數(shù)和對(duì)象的關(guān)系。
我們一直都知道，函數(shù)也是對(duì)象的一種，因?yàn)橥ㄟ^(guò)instanceof就可以判斷出來(lái)。但是函數(shù)和對(duì)象的關(guān)系并不是簡(jiǎn)單的包含和被包含的關(guān)系，這兩者之間的關(guān)系還是有點(diǎn)復(fù)雜的。接下來(lái)我們就來(lái)捋一捋。
首先，闡述一點(diǎn)，對(duì)象都是通過(guò)函數(shù)創(chuàng)建的
對(duì)于下面這種類型的代碼，一般叫做“語(yǔ)法糖”
var obj = {a:10,b:20};
var arr = [5, 'x', true];
但是，其實(shí)上面這段代碼的實(shí)質(zhì)是下面這樣的：
//var obj = { a: 10, b: 20 };
//var arr = [5, 'x', true];
var obj = new Object();
obj.a = 10;
obj.b = 20;
var arr = new Array();
arr[0] = 5;
arr[1] = 'x';
arr[2] = true;
function Fn() { }
Fn.prototype.name = '張三';
Fn.prototype.getAge = function () {
return 12;
};
var fn = new Fn();
console.log(fn.name);
console.log(fn.getAge ());
即，F(xiàn)n是一個(gè)函數(shù)，fn對(duì)象是從Fn函數(shù)new出來(lái)的，這樣fn對(duì)象就可以調(diào)用Fn.prototype中的屬性。
但是，因?yàn)槊總€(gè)對(duì)象都有一個(gè)隱藏的屬性——“proto”，這個(gè)屬性引用了創(chuàng)建這個(gè)對(duì)象的函數(shù)的prototype。即：fn.proto === Fn.prototype
那么，這里的_proto_到底是什么呢？
其實(shí)，這個(gè)__proto__是一個(gè)隱藏的屬性，javascript不希望開發(fā)者用到這個(gè)屬性值，有的低版本瀏覽器甚至不支持這個(gè)屬性值。
var obj = {};
console.log(obj.__proto__);
isPrototypeOf()函數(shù)，用于檢測(cè)兩個(gè)對(duì)象之間似乎否存在原型關(guān)系，使用方法如下：
// 查看 Fn 的 prototype 對(duì)象，是否是 f 原型 Fn.prototype.isPrototypeOf(f);
//// 查看 f 對(duì)象是否是構(gòu)造函數(shù) Fn 的實(shí)例
//console.log(f instanceof Fn);
//// 查看 f 對(duì)象是否是構(gòu)造函數(shù) Fn 的實(shí)例
//console.log(f instanceof Object);
function Fn(){}
function Fun(){}
var f = new Fn();
console.log( f.__proto__ === Fn.prototype ); // t
console.log( Fn.prototype.isPrototypeOf(f) ); // t
console.log( Fun.prototype.isPrototypeOf(f) ); // f
console.log( Object.prototype.isPrototypeOf(f) ); // t
console.log( f instanceof Fn ); // t
console.log( f instanceof Fun ); // f
console.log( f instanceof Object ); // t
//兩種使用，如果是返回ture，如果不是返回false;
//注意：instanceof運(yùn)算符右側(cè)為構(gòu)造函數(shù)，并且js中所有原型都來(lái)自O(shè)bject構(gòu)造函數(shù)。
JS解析器訪問(wèn)屬性順序
當(dāng)訪問(wèn)實(shí)例 f 的屬性或方法時(shí)，會(huì)先在當(dāng)前實(shí)例對(duì)象 f 中查找，如果沒有，則沿著__proto__繼續(xù)向上尋找，如果找到最頂頭的Object還是找不到，則會(huì)拋出undefined。如果在實(shí)例中找到，或某層原型中找到，就會(huì)讀取并使用，同時(shí)停止向上找尋。
由此可見，解析器的解析順序遵循就近原則，如果在最近的位置發(fā)現(xiàn)屬性存在，便不會(huì)繼續(xù)向上找尋。
原型的應(yīng)用
數(shù)組去重：
Array.prototype.noRepeat = function(){
var m = [];
for(var i=0;i<this.length;i++){
if(m.indexOf(this[i]) == -1){
m.push(this[i]);
}
}
return m;
}
var arr = [3,4,5,6,7,6,5,4,3,2,1];
var res = arr.noRepeat();
console.log(res);
var arr1 = ["a","b","c","b","a"];
var res1 = arr1.noRepeat();
console.log(res1);
function Parent(){
}
Parent.prototype.show = function(){
console.log("哈哈哈");
}
function Child(){
}
for(var i in Parent.prototype){
Child.prototype[i] = Parent.prototype[i];
}
Child.prototype.show = function(){
console.log("hello");
}
var p = new Parent();
p.show();
console.log(p.name);
var c = new Child();
c.show();
console.log(c.name);
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com