基于js中的原型(全面講解)
在講js的原型之前,必須先了解下Object和Function。
Object和Function都作為JS的自帶函數(shù),Object繼承自己,F(xiàn)untion繼承自己,Object和Function互相是繼承對方,也就是說Object和Function都既是函數(shù)也是對象。
console.log(Function instanceof Object); // true console.log(Object instanceof Function); // true
Object 是 Function的實例,而Function是它自己的實例。
console.log(Function.prototype); // ƒ () { [native code] }
console.log(Object.prototype); // Object
普通對象和函數(shù)對象
JavaScript中萬物皆對象,但對象之間也是有區(qū)別的。分為函數(shù)對象和普通對象。
函數(shù)對象可以創(chuàng)建普通對象,普通對象沒法創(chuàng)建函數(shù)對象,普通對象JS世界中最低級的小嘍啰,啥特權(quán)也沒有。
凡是通過new Function創(chuàng)建的對象都是函數(shù)對象,其他都是普通對象(通常通過Object創(chuàng)建),可以通過typeof來判斷。
function f1(){};
typeof f1 //"function"
var o1 = new f1();
typeof o1 //"object"
var o2 = {};
typeof o2 //"object"
這邊要注意的是下面這兩種寫法是一樣的
function f1(){}; == var f1 = new Function();
function f2(a,b){
alert(a+b);
}
等價于
var f2 = new Function(a,b,"alert(a+b)");
prototype、_proto_和construetor(構(gòu)造函數(shù))
下面兩句話也很重要
1、每一個函數(shù)對象都有一個prototype屬性,但是普通對象是沒有的;
prototype下面又有個construetor,指向這個函數(shù)。
2、每個對象都有一個名為_proto_的內(nèi)部屬性,指向它所對應(yīng)的構(gòu)造函數(shù)的原型對象,原型鏈基于_proto_;
好了,開始上代碼和例子,建一個普通對象,我們可以看到
1、o的確沒有prototype屬性
2、o是Object的實例
3、o的__proto__指向Object的prototype
4、Object.prototype.constructor指向Object本身
還可以繼續(xù)往下延伸......
var o = {};
console.log(o.prototype); //undefined
console.log(o instanceof Object); //true
console.log(o.__proto__ === Object.prototype) //true
console.log(Object === Object.prototype.constructor) //true
console.log(Object.prototype.constructor) //function Object()
console.log(Object.prototype.__proto__); //null

下面來一個函數(shù)對象,從下面的例子可以看出
1、demo是函數(shù)對象,f1還是普通對象
2、f1是Demo的實例
3、demo的原型prototype的__proto__指向Object的原型prototype,而Object的原型prototyped的__proto__指向null;
function Demo(){};
var f1 = new Demo();
console.log(f1.prototype); //undefined
console.log(f1 instanceof Demo); //true
console.log(f1.__proto__ === Demo.prototype); //true
console.log(Demo === Demo.prototype.constructor) ;//true
console.log(Demo.prototype.__proto__ === Object.prototype) ;//true
console.log(Object.prototype.__proto__); //null

原型鏈
javascript中,每個對象都會在內(nèi)部生成一個proto 屬性,當(dāng)我們訪問一個對象屬性時,如果這個對象不存在就回去proto 指向的對象里面找,一層一層找下去,這就是javascript原型鏈的概念。
f1.__proto__ ==> Demo.prototype ==> Demo.prototype.__proto__ ==> Object.prototype ==> Object.prototype.__proto__ ==> null
JS中所有的東西都是對象,所有的東西都由Object衍生而來, 即所有東西原型鏈的終點指向null
以上這篇基于js中的原型(全面講解)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap基本插件學(xué)習(xí)筆記之Alert警告框(20)
這篇文章主要為大家詳細介紹了Bootstrap基本插件學(xué)習(xí)筆記之ALert警告框的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12
JavaScript實現(xiàn)數(shù)字數(shù)組正序排列的方法
這篇文章主要介紹了JavaScript實現(xiàn)數(shù)字數(shù)組正序排列的方法,涉及javascript中sort方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
詳解如何準(zhǔn)確判斷JavaScript中的數(shù)據(jù)類型
JavaScript中,我們經(jīng)常需要判斷數(shù)據(jù)類型以便于正確地處理數(shù)據(jù),本文將介紹JavaScript中的數(shù)據(jù)類型判斷技術(shù),包括typeof操作符、instanceof操作符、Object.prototype.toString方法以及ES6新增的一些數(shù)據(jù)類型判斷方法,需要的朋友可以參考下2023-08-08
關(guān)于IE中g(shù)etElementsByClassName不能用的問題解決方法
今天使用getElementsByClassName寫了段小程序,在IE6、8中測試的時候就出現(xiàn)問題了,瀏覽器報錯,經(jīng)搜索找到了一個比較好的方法,是個老外寫的一個方法2013-08-08

