Class屬性Extends和Implements的區(qū)別示例介紹

2024-07-11 08:28:03

字體：大中小

供稿：網(wǎng)友

復(fù)制代碼

代碼如下:
var Animal = new Class({
initialize: function(age){
this.age = age;
}
});
var Cat = new Class({
Extends: Animal,
initialize: function(name, age){
this.parent(age); // calls initalize method of Animal class
this.name = name;
}
});
var myCat = new Cat('Micia', 20);
console.log(myCat.name); //'Micia'.
console.log(myCat.age); // 20.

復(fù)制代碼

代碼如下:
var Dog = new Class({
Implements: Animal,
setName: function(name){
this.name = name
}
});
var myAnimal = new Dog(20);
console.log(myAnimal.age);
myAnimal.setName('Micia');
console.log(myAnimal.name); // 'Micia'.

通過(guò)Extends實(shí)現(xiàn)繼承時(shí)，需要通過(guò)調(diào)用parent方法來(lái)調(diào)用父元素的initialize方法從而繼承父元素的屬性

而通過(guò)Implements實(shí)現(xiàn)繼承時(shí)，直接就可以繼承父元素的屬性，這種方式很適合父類(lèi)不止一個(gè)的情況下

另外額外補(bǔ)充類(lèi)方法Implement和extend，這兩個(gè)方法用于擴(kuò)展已經(jīng)定義了的類(lèi)

復(fù)制代碼

代碼如下:
<pre name="code" class="javascript">var Animal = new Class({
initialize: function(age){
this.age = age;
}
});
Animal.implement({
setName: function(name){
this.name = name;
}
});
var myAnimal = new Animal(20);
myAnimal.setName('Micia');
console.log(myAnimal.name); //'Micia'</pre>

“The main difference between extend and implement is that Implement changes the class's prototype, while Extend creates a copy. This means that if you implement a change into a class all instances of that class will inherit that change instantly, while if you use Extend then all existing instances will remain the same。”

簡(jiǎn)單翻譯下:extend和implement的主要區(qū)別是，implement改變了類(lèi)的prototype屬性，而extend只是新建了一個(gè)副本。這意味著如果你通過(guò)implement對(duì)類(lèi)做了改變，那將改變他的所有實(shí)例，而通過(guò)extend改變類(lèi)的話，不會(huì)改變?cè)诖酥按嬖诘膶?shí)例。

復(fù)制代碼

代碼如下:
var Thingy = new Class({
go: function(){
alert('hi');
}
});
var myClass = new Thingy();
myClass.go(); /* alerts 'hi' */
Thingy.implement({
go: function(){
alert('implemented');
}
});
myClass.go(); /* alerts 'implemented' */
Thingy = Thingy.extend({
go: function(){
alert('extended');
}
});
myClass.go(); /* alerts 'implemented'
because extend only affects
new instances. */

上一篇：css中id和class的定義格式、使用技巧及選擇

下一篇：根據(jù)已知高和寬絕對(duì)垂直居中div示例代碼

發(fā)表評(píng)論

共有條評(píng)論