第1章面向对象的Javascript

面向对象的Javascript

1.1动态类型与鸭子类型

var duck = {
    duckSinging : function(){
        console.log('嘎嘎嘎');
    }
}
var chicken = {
    duckSinging : function(){
        console.log('咯咯咯');
    }
}
var choir = []    //合唱团
var joinChoir = function(animal){
    if(animal && typeof animal.duckSinging =='function'){
        choir.push(animal);
        console.log('恭喜加入合唱团');
        console.log('合唱团已有成员:' + choir.length);
    }
}
joinChoir(duck);
joinChoir(chicken);

1.2多态

1.2.1一段“多态”的javascript代码

var makeSoud = function(animal){
    if(animal instanceof Duck){
        console.log('嘎嘎嘎');
    }else if (animal instanceof Chicken){
        console.log('咯咯咯');
    }
}
var Duck = function(){}
var Chicken = function(){}

makeSoud(new Duck());
makeSoud(new Chicken());

加狗又要改makeSoud代码

1.2.2对象的多态性

var makeSoud = function(animal){
    animal.sound();
};
var Duck = function(){};
Duck.prototype.sound = function(){
    console.log('嘎嘎噶');
};
var Chicken = function(){};
Chicken.prototype.sound = function(){
    console.log('咯咯咯');
}
makeSoud(new Duck());
makeSoud(new Chicken());
var Dog = function(){};
Dog.prototype.sound = function(){
    console.log('汪汪汪');
}
makeSoud(new Dog());

1.2.3 类型检查与多态

java

1.2.4 使用继承得到多态效果

1.2.5 Javascript的多态

不需要java类似的向上转型

1.2.6 多态在面向对象程序设计中的作用

var googleMap = {
    show:function(){
        console.log('开始渲染谷歌地图');
    }
};


var baiduMap = {
    show:function(){
        console.log('开始渲染百度地图');
    }
}
var renderMap = function(type){
    if(type=='google'){
        googleMap.show();
    }else if(type=='baidu'){
        baiduMap.show();
    }
};

renderMap('google');
renderMap('baidu');

把相同的部分抽象出来

var googleMap = {
    show:function(){
        console.log('开始渲染谷歌地图');
    }
};


var baiduMap = {
    show:function(){
        console.log('开始渲染百度地图');
    }
}
var renderMap = function(map){
    if(map.show instanceof Function){
        map.show();
    }
}

renderMap(googleMap);
renderMap(baiduMap);

实际开发中借助适配器模式

1.2.7 设计模式与多态

1.3 封装

1.3.1 封装数据

var myObject = (function(){
    var _name = 'sven';
    return {
        getName:function(){
            return _name;
        }
    }
})();

console.log(myObject.getName()); //sven
console.log(myObject._name); //undefined

1.3.2 封装实现

封装不仅仅是隐藏数据,还包括隐藏细节 设计细节 对象的类型 等

1.3.3 封装类型

封装类型是通过抽象类和接口来进行的 Javascript不区分类型

1.3.4 封装变化

“可复用面向对象软件基础”

1.4 原型模式与基于原型继承的Javascript对象系统

原型编程的思想中,类并不是必需的,对象未必需要从类中创建而来,一个对象是通过克隆另外一个对象所得到的

1.4.1 使用克隆的原型模式

var Plane = function(){
    this.blood == 100;
    this.attackLevel = 1;
    this.defenseLevel = 1;
};
var plane = new Plane();
plane.blood = 500;
plane.attackLevel = 10;


var clonePlane = Object.create(plane);
console.log(clonePlane.attackLevel);  //10
/*不支持Object.create方法的浏览器中*/
Object.create = Object.create||function(obj) {
        var F = function () {
        };
        F.prototype = obj;
        return new F();
    }

1.4.2 克隆是创建对象的手段

1.4.3 体验lo语言

1.4.4 原型编程范型的一些规则

  • 所有的数据都是对象
  • 要得到一个对象,不是通过实例化类,而是找到一个对象作为原型并克隆它。

1.4.5 Javascript中的原型继承

  • 所有的数据都是对象
  • 要得到一个对象,不是通过实例化类,而是找到一个对象作为原型并克隆它。
  • 对象会记住它的原型。
  • 如果对象无法响应某个请求,它会把这个请求委托给它的对象系统的。

1.所以的数据都是对象

undefined number boolean string function object

Javascript设计本意是除了undefined之外,一切应是对象,为了实现这一目标number boolean string这几种基本类型也可以通过“包装类”的方式变成对象类型数据来处理。

Javascript中的根对象是Object.prototype对象->空对象

var obj1 = new Object();
var obj2 = new Object();
console.log(Object.getPrototyprOf(obj1) === Object.prototype);//ture
console.log(Object.getPrototyprOf(obj2) === Object.prototype);//ture

2.要得到一个对象,不是通过实例化类,而是找到一个对象的原型并克隆它

function Person(name){
this.name = name;
}
Person.prototype.getName = function(){
    return this.name;
}
var a = new Person('sven');
console.log(a.name);  //sven
console.log(a.getName()); //sven
console.log(Object.getPrototypeOf(a) === Person.prototype);  //ture

Person并不是类,而是函数构造器,Javascript的函数既可以作为普通函数被调用,也可以做为构造器被调用。当使用new运算符来调用函数时,此时的函数就是一个构造器。用new运算符来创建对象的过程,实际上也只是先克隆Object.prototype对象,再进行一些额外的操作。

function Person(name){
    this.name = name;
}
Person.prototype.getName = function(){
    return this.name;
}
var objectFactory = function(){
    var obj = new Object(),  //从Object.prototype上克隆一个空的对象
        Constructor = [].shift.call(arguments); //取得外部传人的构造期,此例是Person
    obj._proto_ = Constructor.prototype;
    var ret = Constructor.apply(obj,arguments); //借外部传人的构造器给obj设置属性。
    return typeof ret === 'object' ? ret : obj;
};

var a = objectFactory(Person,'sven');

console.log(a.name);  //sven
console.log(a.getName()); //sven
console.log(Object.getPrototypeOf(a) === Person.prototype);  //ture

Javascript给对象提供一个名为proto的隐藏属性,默认指向它的构造器的原型对象。即{Constructor}.prototype.在一些浏览器中,proto被公开出来。
proto就是对象跟“对象构造器的原型”联系起来的纽带

var a = new Object();
console.log(a.__proto__ === Object.prototype);

4如果无法响应某个请求,它会把这个请求委托给它的构造器的原型

var obj = {name:'sven'};

var A = function(){};
A.prototype = obj;

var a = new A();
console.log(a.name); //sven

继承

var A = function(){};
A.prototype = {name:'sven'};

var B = function(){};
B.prototype = new A();

var b = new B();
console.log(b.name);  //输出sven

1.4.6 原型继承未来

Object.create(null)可以创建出没有原型的对象

es6

class Animal{
    constructor(name){
        this.name = name;
    }
    getName(){
        return this.name;
    }
}

class Dog extends Animal{
    constructor(name){
        super(name);
    }
    speak(){
        return'woof';
    }
}
var dog = new Dog('scamp');
console.log(dog.getName()+'says' dog.speak());
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,487评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,621评论 2 374
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,611评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,659评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,509评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,380评论 1 274
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,799评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,443评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,739评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,781评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,554评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,400评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,811评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,043评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,330评论 1 253
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,775评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,978评论 2 337

推荐阅读更多精彩内容