這次為大家帶來在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中文网其它相关文章!
推荐阅读:
以上是在JS中實作繼承有哪幾種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!