手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >Class属性Extends和Implements的区别示例介绍
Class属性Extends和Implements的区别示例介绍
摘要:varAnimal=newClass({initialize:function(age){this.age=age;}});varCat=n...

<span>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.</span>

<span>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方法来调用父元素的initialize方法从而继承父元素的属性

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

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

<span><span></span></span><pre name="code"><span>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'</span></pre><span>

<span></span></span>

“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。”

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

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. */

【Class属性Extends和Implements的区别示例介绍】相关文章:

CSS 文本渲染属性text-rendering的介绍和使用示例

css的em/ex/px/pt(css长度单位)使用介绍

CSS 平级和儿子级样式写法示例

CSS table 单行布局示例代码

CSS3中动画属性transform、transition和animation属性的区别

css 的border属性改变hr颜色小示例

CSS的position属性在DIV层中的应用

CSS3实现的闪烁跳跃进度条示例

css sprite原理优缺点及使用示例介绍

DIV边距属性在Chrome和IE中的区别

精品推荐
分类导航