快捷導(dǎo)航

javascript基于原型鏈的繼承及call和apply函數(shù)用法分析

更新時(shí)間：2016年12月15日 09:37:37 作者：小小小小小亮

這篇文章主要介紹了javascript基于原型鏈的繼承及call和apply函數(shù)用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript中繼承的概念、創(chuàng)建方法以及call和apply函數(shù)的功能與使用技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript基于原型鏈的繼承及call和apply函數(shù)用法。分享給大家供大家參考，具體如下：

1. 繼承是面向?qū)ο缶幊陶Z(yǔ)言的一個(gè)重要特性，比如Java中，通過(guò)extend可以實(shí)現(xiàn)多繼承，但是JavaScript中的繼承方式跟JAVA中有很大的區(qū)別，JS中通過(guò)原型鏈的方式實(shí)現(xiàn)繼承。

（1）對(duì)象的原型：因?yàn)镴S中，函數(shù)也是對(duì)象，因此我們先從對(duì)象出發(fā)。什么是對(duì)象的原型，原型的定義為：

所有通過(guò)對(duì)象直接量創(chuàng)建的對(duì)象都具有同一個(gè)函數(shù)原型，并且可以通過(guò)Object.prototype獲得對(duì)原型對(duì)象的引用，通過(guò)關(guān)鍵字new和構(gòu)造函數(shù)調(diào)用創(chuàng)建的對(duì)象的原型就是構(gòu)造函數(shù)的prototype屬性的值。

注：沒(méi)有原型的對(duì)象不多，Object.prototype對(duì)象是沒(méi)有原型的。

（2）創(chuàng)建對(duì)象的原型

比如這里有一個(gè)Student對(duì)象和一個(gè)Person對(duì)象，其中，Student.prototype指向Person.prototype

對(duì)于創(chuàng)建對(duì)象完全不同的兩種方法：

i)Student.prototype=Person.prototype

這種方法，創(chuàng)建Student的prototype對(duì)象，如果改變Student.prototype的值的時(shí)候，Person.prototype也會(huì)同時(shí)改變，為了避免這種情況，我們應(yīng)采用其他方式；

ii)Student.prototype=Object.create(Person.prototype)

這種方法，創(chuàng)建的Student的Prototype對(duì)象，在改變Student.prototype的屬性或者方法時(shí)，不會(huì)同時(shí)去改變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)從上面的兩個(gè)例子中，我們大概可以看出來(lái)，如果對(duì)象osp上有x屬性，那么無(wú)論是取值，還是賦值，都是基于osp對(duì)象上的直接屬性x，如果osp對(duì)象上沒(méi)有x屬性，那么會(huì)沿著prototype原型鏈查找，直到找到一個(gè)包含x屬性的prototype屬性鏈上的對(duì)象，如果osp對(duì)象所有prototype原型鏈上都沒(méi)有包含x屬性，那么返回underfined。

ii)o對(duì)象屬性的賦值，被視為在osp對(duì)象上直接進(jìn)行，不會(huì)影響原型鏈上的屬性。比如上例中的osp.x=2的賦值是在osp對(duì)象上，不會(huì)影響osp的原型對(duì)象o。

2. 舉一些對(duì)象中繼承的例子

（1）我們學(xué)過(guò)可以用instanceof來(lái)進(jìn)行類(lèi)型判斷，instanceof方法本來(lái)就是基于原型鏈的。

比如例3：

[1,2] instanceof Array //返回true
[1,2] instanceof Object //返回true

這個(gè)例子說(shuō)明Array.prototype也是繼承于對(duì)象而來(lái)。

（2）函數(shù)中的組合繼承問(wèn)題

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的指向，用于對(duì)象A調(diào)用對(duì)象B的方法，call函數(shù)和apply函數(shù)的區(qū)別在于傳參的類(lèi)型不同，apply(x,y)，x表示的是執(zhí)行函數(shù)的對(duì)象，而y則表示執(zhí)行函數(shù)所需要調(diào)用的參數(shù)，是一個(gè)數(shù)組，并且可以傳參為argument數(shù)組，而call(x,y)中的y之后的變量則是實(shí)實(shí)在在的變量；

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: