高级程序开发设计笔记1(原型模式的初步了解)

鸭子类型的实现

var duck = {duckSinging() {console.log("gagaga");},
};var chicken = {duckSinging() {console.log("gagaga"); //只关注对象行为，不关注本身},
};var chior = [];
var joinChior = function (animal) {if (animal && typeof animal.duckSinging == "function") {chior.push(animal);console.log("恭喜加入合唱团");console.log("合唱团已有的成员数量:" + chior.length);}
};joinChior(duck);
joinChior(chicken);
console.log(chior);

利用鸭子类型的思想，我们就可以实现面向接口编程，不用面向实现编程

//多态就是同一个操作对于不同的对象上面，产生不同的结果

var makeSound = function (animal) {if (animal instanceof Duck) {console.log("gagaga");} else if (animal instanceof Chicken) {console.log("gogogo");}
};var Duck = function () {};
var Chicken = function () {};makeSound(new Duck());
makeSound(new Chicken());

多态背后的思想是将做什么和谁去做，怎么做分开

动物都会叫，这个是不变的。但是不同的动物有不同的叫法，是可变的，符合我们的封闭开放原则

//改写后的多态

var makeSound1 = function (animal) {animal.sound();
};
var Duck = function () {};Duck.prototype.sound = function () {console.log("gagaga");
};var Chicken = function () {};Chicken.prototype.sound = function () {console.log("gogogo");
};makeSound1(new Duck());
makeSound1(new Chicken());//后来再加入一只狗var Dog = function () {};
Dog.prototype.sound = function () {console.log("wangwangwang");
};makeSound1(new Dog());

实际案例中的多态

var googleMap = {show() {console.log("开始渲染谷歌地图");},
};// var renderMap = function () {
//   googleMap.show();
// };// renderMap();//加入百度地图var baiduMap = {show() {console.log("开始渲染百度地图");},
};var renderMap = function (type) {if (type === "google") {googleMap.show();} else if (type == "baidu") {baiduMap.show();}
};renderMap("google");
renderMap("baidu");

这种课拓展性太低了，一旦要增加新的地图，就要不断的ifelse,这样是危险的

//那我们就要把相同部分抽离出来

var renderMap = function (map) {if (map.show && typeof map.show === "function") {map.show();}
};renderMap(googleMap);
renderMap(baiduMap);//再加一个搜狗地图var sogoMap = {show() {console.log("正在渲染搜狗地图");},
};renderMap(sogoMap);//数据的封装var myObject = (function () {var _name = "gaofeng"; //私有变量，相互约定的return {getName() {//这是公共方法，相互约定的return _name;},};
})();console.log(myObject.getName());

原型模式

var Plane = function () {this.blood = 100;this.attackLevel = 1;this.defendLevel = 1;
};var plane = new Plane();plane.blood = 500;
plane.attackLevel = 10;
plane.defendLevel = 7;/* var clonePlane = Object.create(plane);
console.log(clonePlane, "clonePlane");
console.log(clonePlane.blood);
console.log(clonePlane.attackLevel);
console.log(clonePlane.defendLevel); *///如果不支持Object.create()
//可以用以下的方法Object.myCreate = function (obj) {var F = function () {};F.prototype = obj;return new F();
};var clonePlane = Object.myCreate(plane);
console.log(clonePlane, "clonePlane");
console.log(clonePlane.blood);
console.log(clonePlane.attackLevel);
console.log(clonePlane.defendLevel);

function Person(name) {this.name = name;
}Person.prototype.getName = function () {return this.name;
};var objectFactory = function () {var obj = new Object(), //从Object上复制出一个空的对象Constructor = [].shift.call(arguments);obj.__proto__ = Constructor.prototype; //确保新对象的指向正确原型var ret = Constructor.apply(obj, arguments); //给这个对象赋值return typeof ret === "object" ? ret : obj; //确保始终返回一个对象
};var a = objectFactory(Person, "seven");console.log(a, "a");
console.log(a.getName());
console.log(Object.getPrototypeOf(a) === Person.prototype);

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！