javascript基于原型鏈的繼承及call和apply函數(shù)用法分析
本文實例講述了javascript基于原型鏈的繼承及call和apply函數(shù)用法。分享給大家供大家參考,具體如下:
1. 繼承是面向?qū)ο缶幊陶Z言的一個重要特性,比如Java中,通過extend可以實現(xiàn)多繼承,但是JavaScript中的繼承方式跟JAVA中有很大的區(qū)別,JS中通過原型鏈的方式實現(xiàn)繼承。
(1)對象的原型:因為JS中,函數(shù)也是對象,因此我們先從對象出發(fā)。什么是對象的原型,原型的定義為:
所有通過對象直接量創(chuàng)建的對象都具有同一個函數(shù)原型,并且可以通過Object.prototype獲得對原型對象的引用,通過關(guān)鍵字new和構(gòu)造函數(shù)調(diào)用創(chuàng)建的對象的原型就是構(gòu)造函數(shù)的prototype屬性的值。
注:沒有原型的對象不多,Object.prototype對象是沒有原型的。
(2)創(chuàng)建對象的原型
比如這里有一個Student對象和一個Person對象,其中,Student.prototype指向Person.prototype
對于創(chuàng)建對象完全不同的兩種方法:
i)Student.prototype=Person.prototype
這種方法,創(chuàng)建Student的prototype對象,如果改變Student.prototype的值的時候,Person.prototype也會同時改變,為了避免這種情況,我們應(yīng)采用其他方式;
ii)Student.prototype=Object.create(Person.prototype)
這種方法,創(chuàng)建的Student的Prototype對象,在改變Student.prototype的屬性或者方法時,不會同時去改變Person.prototype的屬性。
(3)基于繼承的賦值操作
例1:
var o={ x:1 } o.x=2; alert(o.x);//輸出o.x=2
例2:
var o={ x:1 } var osp=Object.create(o); alert(osp.x);//輸出1 osp.x=2; alert(osp.x);//輸出2
i)從上面的兩個例子中,我們大概可以看出來,如果對象osp上有x屬性,那么無論是取值,還是賦值,都是基于osp對象上的直接屬性x,如果osp對象上沒有x屬性,那么會沿著prototype原型鏈查找,直到找到一個包含x屬性的prototype屬性鏈上的對象,如果osp對象所有prototype原型鏈上都沒有包含x屬性,那么返回underfined。
ii)o對象屬性的賦值,被視為在osp對象上直接進行,不會影響原型鏈上的屬性。比如上例中的osp.x=2的賦值是在osp對象上,不會影響osp的原型對象o。
2. 舉一些對象中繼承的例子
(1)我們學(xué)過可以用instanceof來進行類型判斷,instanceof方法本來就是基于原型鏈的。
比如例3:
[1,2] instanceof Array //返回true
[1,2] instanceof Object //返回true
這個例子說明Array.prototype也是繼承于對象而來。
(2)函數(shù)中的組合繼承問題
function student(name,age){ this.name=name; this.age=age; } student.prototype.age=function(){ return this.age; } function beststudent(name,age){ student.call(this,age); return this.name; } beststudent.prototype=new student(); alert(beststudent("yu",2))//輸出2 }
3. call函數(shù)和apply函數(shù)
call函數(shù)和apply函數(shù)用于改變函數(shù)中this的指向,用于對象A調(diào)用對象B的方法,call函數(shù)和apply函數(shù)的區(qū)別在于傳參的類型不同,apply(x,y),x表示的是執(zhí)行函數(shù)的對象,而y則表示執(zhí)行函數(shù)所需要調(diào)用的參數(shù),是一個數(shù)組,并且可以傳參為argument數(shù)組,而call(x,y)中的y之后的變量則是實實在在的變量;
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
- 詳解JavaScript函數(shù)callee、call、apply的區(qū)別
- JavaScript函數(shù)apply()和call()用法與異同分析
- JS中call和apply函數(shù)用法實例分析
- javascript中call,apply,bind函數(shù)用法示例
- JavaScript中函數(shù)(Function)的apply與call理解
- Javascript中call和apply函數(shù)的比較和使用實例
- 從JQuery源碼分析JavaScript函數(shù)的apply方法與call方法
- JavaScript中的apply和call函數(shù)詳解
- JavaScript函數(shù)Call、Apply原理實例解析
相關(guān)文章
JavaScript獲取地址欄參數(shù)的方法實現(xiàn)
這篇文章主要給大家介紹了關(guān)于JavaScript獲取地址欄參數(shù)的方法實現(xiàn),項目中經(jīng)常遇到獲取上個頁面跳轉(zhuǎn)過來獲取當(dāng)前的參數(shù),文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07javascript學(xué)習(xí)小結(jié)之prototype
本系列博文主要談一些在 javascript 使用中經(jīng)常會混淆的高級應(yīng)用,包括: prototype, closure, scope, this關(guān)鍵字. 對于一個需要提高自己javascript水平的程序員,這些都是必須要掌握的,本節(jié)主要介紹prototype.2015-12-12JS獲取當(dāng)前使用的瀏覽器名字以及版本號實現(xiàn)方法
下面小編就為大家?guī)硪黄狫S獲取當(dāng)前使用的瀏覽器名字以及版本號實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08網(wǎng)易JS面試題與Javascript詞法作用域說明
Javascript函數(shù)在定義它們的作用域里運行,而不是在執(zhí)行它們的作用域里運行。2010-11-11