首頁 > web前端 > js教程 > 主體

在JS中實作繼承有哪幾種方式

php中世界最好的语言
發布: 2018-04-17 14:33:52
原創
1532 人瀏覽過

這次為大家帶來在JS中實現繼承有哪幾種方式,在JS中實現繼承的注意事項有哪些,下面就是實戰案例,一起來看一下。

我們都知道,物件導向的三大特徵──封裝、繼承、多型。封裝無非就是屬性和方法的私有化,所以我們JS中提供了私有屬性和私有方法。 而JS中並沒有多態,因此我們說JS是一門基於物件的語言,而非物件導向的語言。那麼,物件導向三大特徵中,在JS中最重要的就是繼承了。

一、繼承的基本概念

使用一個子類別繼承另一個父類,子類別可以自動擁有父類別的屬性和方法。

>>>繼承的兩方,發生在兩個類別之間。

所以,所謂的繼承,無非就是讓子類,擁有父類別的所有屬性和方法。那麼,在JS中,我們要模擬實現這一步,有三種常用的方法可以實現。

分別是:擴展Object的prototype實作繼承、使用call和apply實作繼承、使用原型實作繼承。

二、擴充Object的prototype實作繼承

擴展Object實作繼承的本質,是我們自己寫了一個方法,將父類別的所有屬性和方法透過遍歷循環,逐一複製給子類別。

詳細步驟如下:

1:定義父類別

functionParent(){}

2:定義子類別

funtion Son(){}

3:透過原型為Object物件新增一個擴充方法。

Object.prototype.customExtend =function(parObj){
for(variinparObj){//通过for-in循环,把父类的所有属性方法,赋值给自己
this[i] =parObj[i];
}
}
登入後複製

4:子類別物件呼叫擴充方法

# Son.customExtend(Parent);

# 三、使用call和apply實作繼承

首先,要用這個方式顯示繼承,我們再來回顧一下call和apply兩個函數的作用:

call和apply:透過函數名稱呼叫方法,強行將函數中的this指向某個物件;

call寫法:func.call(func的this指向的obj,參數1,參數2...);

# apply寫法:func.apply(func的this指向的obj,[參數1,參數2...]);

那麼,我們使用這兩個函數來實現繼承的想法就是:在子類別中,使用父類別函數呼叫call或apply,並將父類別的this,強行綁定為子類別的this。那這樣,父類別綁定在this上的屬性和方法,不就順利成章的綁定到子類別的this上了嗎?

詳細步驟如下:

# 1:定義父類別

funtion Parent(){}

2:定義子類別

functionSon(){}

3:在子類別中透過call方法或apply方法去呼叫父類別。

functionSon(){
Parent.call(this,....);//将父类函数中的this,强行绑定为子类的this}
登入後複製

四、使用原型實作繼承

# 使用原型實作繼承,是比較簡單而且比較好理解的一種,就是將子類別的prototype指向父類別的物件就可以啦。

詳細步驟如下:

1:定義父類別

functionParent(){}

2:定義子類別

functionSon(){}

3:把在子類別物件的原型物件宣告為父類別的實例。

Son.prototype =newParent();

# 五、閉包

# 要理解閉包,首先,我們要了解JS中的作用域:

# 1、JS中的作用域

# 全域變數:函數外宣告的變數

局部变量:函数内声明的变量

在JS中,函数为唯一的局部作用域,而if、for等其他{}没有自己的作用域

所以,函数外不能访问局部变量。其实,变量在函数执行完毕以后,占用的内存就会被释放。

2、闭包

在概述中,我刚刚提到,面向对象的三大特征中的“封装”,我们可以用函数的私有属性来实现。这个私有属性,其实也就是局部变量。

但是我们都知道,封装是限制外部的访问,并不是直接拒绝外部的访问,那么我们在函数中私有的属性,怎么才能在外部访问呢?答案就是闭包!

JS中,提供了一种"闭包"的概念:在函数内部,定义一个子函数,可以用子函数访问父函数的私有变量。执行完操作以后,将子函数通过return返回。

代码示例:

functionfunc2(){varnum = 1;functionfunc3(){varsum = num+10;
alert(sum);
}returnfunc3;
}varf =func2();
f();
登入後複製

3、闭包的作用:

① 访问函数的私有变量;

② 让函数的变量始终存在于内存中,而不被释放。

4、闭包的典型应用

我们来做这样一个功能:页面中有6个li,要求实现点击每个li,弹出这个li对应的序号。

HTML代码很简单:

那JS代码呢?我觉得很大一部分同学会这样写:

varlis = document.getElementsByTagName("li");for(vari=0;i
lis[i].onclick=function(){
alert("您/点击了第"+i+"个li!");
}
登入後複製

那么,这样对吗?不对!!!我们来分析一下:页面加载的时候,JS代码会全部执行,也就是上面的for循环在页面加载完就已经执行完了!那,这个i就已经变成了lis.length。也就是说,你在点击li的时候,无论点击第几个,弹出的都是lis.length。

那么,我们应该怎么修改呢?看代码!

varlis = document.getElementsByTagName("li");for(vari=0;i
lis[j].onclick=function(){
alert("您/点击了第"+j+"个li!");
}
}();
}
登入後複製

区别在哪?明眼人一眼就看穿我们在for循环外面嵌套了一层自执行函数!这种函数套函数的形式,就形成了闭包!

那作用呢?我们刚才强调,闭包的自执行函数会有自己的作用域。在函数里面的代码没有执行的时候,自执行函数中的j是不会被释放掉的!

也就是说,循环转了6次!生成了6个独立的函数空间,每个空间中有自己独立的j变量,所以最终不会出现所有li点击都是lis.length的情况!                         

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

使用jquery与ajax进行数据交互

echarts实现饼图扇区统计表的添加点击事件

JavaScript面向对象与this指向(附代码)

以上是在JS中實作繼承有哪幾種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板