首頁 >web前端 >js教程 >在JS中實作繼承有哪幾種方式

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

php中世界最好的语言原創: 2018-04-17 14:33:521577瀏覽

這次為大家帶來在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中實作繼承有哪幾種方式

相關文章