主页 > 网站建设 >

Class属性Extends和Implements的区别示例介绍

网站建设 2023-01-28 21:39www.1681989.com免费网站

复制代码
代码如下:

<span style="font-size:12px;">var Animal = new Class({
itialize: function(age){
this.age = age;
}
});
var Cat = new Class({
Extends: Animal,
itialize: function(name, age){
this.parent(age); // calls italize method of Animal class
this.name = name;
}
});
var myCat = new Cat('Micia', 20);
console.log(myCat.name); //'Micia'.
console.log(myCat.age); // 20.</span>


复制代码
代码如下:

<span style="font-size:12px;">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'.
</span>

通过Extends实现继承时，需要通过调用parent方法来调用父元素的itialize方法从而继承父元素的属性

而通过Implements实现继承时，直接就可以继承父元素的属性，这种方式很适合父类不止一个的情况下

额外补充类方法Implement和extend，这两个方法用于扩展已经定义了的类

复制代码
代码如下:

<span class="kw2"><span style="font-size:12px"></span></span><pre name="code" class="javascript"><span style="font-size:12px;">var Animal = new Class({
itialize: 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'</span></pre><span style="font-size:12px">
<span class="co1"></span></span>

“The ma 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 to a class all stances of that class will herit that change stantly, while if you use Extend then all existg stances will rema the same。”

简单翻译下:extend和implement的主要区别是，implement改变了类的prototype属性，而extend只是新建了一个副本。这意味着如果你通过implement对类做了改变，那将改变他的所有实例，而通过extend改变类的话，不会改变在此之前存在的实例。

复制代码
代码如下:

var Thgy = new Class({
go: function(){
alert('hi');
}
});
var myClass = new Thgy();
myClass.go(); / alerts 'hi' /
Thgy.implement({
go: function(){
alert('implemented');
}
});
myClass.go(); / alerts 'implemented' /
Thgy = Thgy.extend({
go: function(){
alert('extended');
}
});
myClass.go(); / alerts 'implemented'
because extend only affects
new stances. /
上一篇：根据已知高和宽绝对垂直居中div示例代码 下一篇：css使用overflow属性控制滚动条的样式

网站设计

Copyright © 2016-2025 www.1681989.com 推火网 版权所有 Power by