脚本宝典收集整理的这篇文章主要介绍了Js面向对象的四层 -Axel Rauschmayer,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
第一层 单一对象
创建对象
对象:字符和数值的映射
属性:访问映射
-
方法:属性的值是函数
this 指向函数的接受者
VAR jane ={
//属性
name='Jane',
//方法
describe:function(){
return 'PErson named'+this.name;
}
对象和映射(map)
相同点:
非常动态:自由删除增加属性
不同点:
继承(原型链继承)
快速访问属性(通过构造器器)
第二层 原型链 prototype chains
引出共享属性
var jane = {
name:"jane",
describe:function(){
return 'Person named' +this.name;
}
};
var tarzan = {
name:'Tarzan',
describe:function(){
return 'Person named' + this.name;
}
};
解决方案:通过原型继承
jane 和 tarzan 通过共享一个原型对象。
原型链和简单对象一样
var PersonPRoto ={
describe:function(){
return 'Person named' +this.name;
}
}
var jane = {
__proto__:PersonProto,
name:'Jane'
};
var tarzan = {
__proto__:PersonProto,
name:'Tarzan'
};
获取和设置原型
Obejct.create(proto):
var PersonProto = {
decribe:function(){
return 'Pseson named' + this.name;
}
};
var jane = Object.create(PersonProto);
jane.name='Jane';
Object.getPrototypeOf(obj):
# Object.getPrototypeOf(jane) === PersonProto
true
第三层 构造器
persons的构造器
function Person(name){
this.name = name;
this.decsribe = funciont(){
return 'Person named' + this.name;
};
}
var jane = new Person ('Jane');
console.LOG(jane instanceof Person); //true
如何消除冗余?
//特性的属性
function Person(name){
this.name = name;
}
//共享属性
Person.prototype.describe = function(){
return 'Person named'+ this.name;
}
instanceof是怎么工作的?
value instanceof Constr
检查 constructor.prototype是否在value的原型链上。
Constr.prototype.isPrototypeOf(value)
第四层 构造器的继承
目标: employee 继承 Person
function Person(name){
this.name = name;
}
Person.prototype.sayHelloto = function (otherName){
console.log(this.name +'says hello to' + otherName);
}
Person.prototype.describe = function(){
return 'Person named' + this.name;
}
Employee(name,tITle)和Person一样,除了:
为了继承,employee必须做:
继承Person的属性
创造属性title
继承Person的原型属性
重写Person.prototype.describe
function Employee (name,title){
Person.call(this,name); //继承所有属性
this.title = title ; //增加title属性
}
Employee.prototype = Object.create(Person.prototype);//继承原型属性
Employee.prototype.describe = function(){//重写原型describe
return Person.prototype.describe.call(this)+ '('+this.title+')'; //重写方法
}
以上是脚本宝典为你收集整理的Js面向对象的四层 -Axel Rauschmayer全部内容,希望文章能够帮你解决Js面向对象的四层 -Axel Rauschmayer所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。