脚本宝典收集整理的这篇文章主要介绍了

Js面向对象的四层 -Axel Rauschmayer

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

四个层次

第一层 单一对象

创建对象

  • 对象:字符和数值的映射

  • 属性:访问映射

  • 方法:属性的值是函数

    • this 指向函数的接受者

var jane ={
    //属性
    name='Jane',
    
    //方法
    describe:function(){
        return 'Person named'+this.name;
    }

https://www.youtube.com/watch?v=VJOTcUsD2kA&t=6m16s

对象和映射(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一样,除了:

  • 其他属性:title

  • describe() return 'Person named <name> (<title>)'

为了继承,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-脚本宝典
图片描述

https://www.youtube.com/watch?v=VJOTcUsD2kA&t=6m16s

总结

以上是脚本宝典为你收集整理的

Js面向对象的四层 -Axel Rauschmayer

全部内容,希望文章能够帮你解决

Js面向对象的四层 -Axel Rauschmayer

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过