面向?qū)ο蟮腏avascript
1.1動態(tài)類型與鴨子類型
var duck = {
duckSinging : function(){
console.log('嘎嘎嘎');
}
}
var chicken = {
duckSinging : function(){
console.log('咯咯咯');
}
}
var choir = [] //合唱團(tuán)
var joinChoir = function(animal){
if(animal && typeof animal.duckSinging =='function'){
choir.push(animal);
console.log('恭喜加入合唱團(tuán)');
console.log('合唱團(tuán)已有成員：' + choir.length);
}
}
joinChoir(duck);
joinChoir(chicken);
1.2多態(tài)
1.2.1一段“多態(tài)”的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對象的多態(tài)性
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 類型檢查與多態(tài)
java
1.2.4 使用繼承得到多態(tài)效果
1.2.5 Javascript的多態(tài)
不需要java類似的向上轉(zhuǎn)型
1.2.6 多態(tài)在面向?qū)ο蟪绦蛟O(shè)計中的作用
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);
實際開發(fā)中借助適配器模式
1.2.7 設(shè)計模式與多態(tài)
1.3 封裝
1.3.1 封裝數(shù)據(jù)
var myObject = (function(){
var _name = 'sven';
return {
getName:function(){
return _name;
}
}
})();
console.log(myObject.getName()); //sven
console.log(myObject._name); //undefined
1.3.2 封裝實現(xiàn)
封裝不僅僅是隱藏數(shù)據(jù)彼绷，還包括隱藏細(xì)節(jié) 設(shè)計細(xì)節(jié) 對象的類型 等
1.3.3 封裝類型
封裝類型是通過抽象類和接口來進(jìn)行的 Javascript不區(qū)分類型
1.3.4 封裝變化
“可復(fù)用面向?qū)ο筌浖A(chǔ)”
1.4 原型模式與基于原型繼承的Javascript對象系統(tǒng)
原型編程的思想中缝龄，類并不是必需的乃戈，對象未必需要從類中創(chuàng)建而來，一個對象是通過克隆另外一個對象所得到的
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 克隆是創(chuàng)建對象的手段
1.4.3 體驗lo語言
1.4.4 原型編程范型的一些規(guī)則
- 所有的數(shù)據(jù)都是對象
- 要得到一個對象谎倔，不是通過實例化類孵户，而是找到一個對象作為原型并克隆它目派。
1.4.5 Javascript中的原型繼承
- 所有的數(shù)據(jù)都是對象
- 要得到一個對象然低，不是通過實例化類仔役，而是找到一個對象作為原型并克隆它掷伙。
- 對象會記住它的原型。
- 如果對象無法響應(yīng)某個請求骂因，它會把這個請求委托給它的對象系統(tǒng)的炎咖。
1.所以的數(shù)據(jù)都是對象
undefined number boolean string function object
Javascript設(shè)計本意是除了undefined之外赃泡，一切應(yīng)是對象寒波，為了實現(xiàn)這一目標(biāo)number boolean string這幾種基本類型也可以通過“包裝類”的方式變成對象類型數(shù)據(jù)來處理。
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并不是類，而是函數(shù)構(gòu)造器级野，Javascript的函數(shù)既可以作為普通函數(shù)被調(diào)用页屠，也可以做為構(gòu)造器被調(diào)用。當(dāng)使用new運算符來調(diào)用函數(shù)時蓖柔，此時的函數(shù)就是一個構(gòu)造器辰企。用new運算符來創(chuàng)建對象的過程，實際上也只是先克隆Object.prototype對象况鸣，再進(jìn)行一些額外的操作牢贸。
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); //取得外部傳人的構(gòu)造期，此例是Person
obj._proto_ = Constructor.prototype;
var ret = Constructor.apply(obj,arguments); //借外部傳人的構(gòu)造器給obj設(shè)置屬性镐捧。
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的隱藏屬性潜索，默認(rèn)指向它的構(gòu)造器的原型對象。即｛Constructor}.prototype.在一些瀏覽器中懂酱，proto被公開出來竹习。
proto就是對象跟“對象構(gòu)造器的原型”聯(lián)系起來的紐帶
var a = new Object();
console.log(a.__proto__ === Object.prototype);
4如果無法響應(yīng)某個請求，它會把這個請求委托給它的構(gòu)造器的原型
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)可以創(chuàng)建出沒有原型的對象
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());