js 设计模式学习（3）

原型模式

将可复用的、可共享的、耗时大的从基类中提取出来，然后放在其原型中，然后子类通过组合继承或者寄生组合式继承将方法和属性继承下来。

 1 //图片轮播类
 2 var LoopImages = function (imgArr, container) {
 3     this.imgArray = imgArr;
 4     this.container = container;
 5 }
 6 LoopImages.prototype = {
 7     createImage: function () {
 8         console.log('creat img function');
 9     },
10     changeImage: function () {
11         console.log('change img function');
12     }
13 }
14
15 var SlideLoopImg = function (imgArr, container) {
16     //构造函数继承图片轮播类
17     LoopImages.call(this, imgArr, container);
18 }
19
20 SlideLoopImg.prototype = new LoopImages();
21 //重写继承切换下一张图片的方法
22 SlideLoopImg.prototype.changeImage = function () {
23     console.log('SlideLoopImg Change Images');
24 }

原型继承

通过prototypeExtend创建的是一个对象，我们无需再去NEW新的实例对象。

 1 function prototypeExtend() {
 2     var F = function () { },
 3         args = arguments,
 4         i=0,
 5         len = args.length;
 6
 7     for (; i < len; i++) {
 8         for (var j in args[i]) {
 9             F.prototype[j] = args[i][j];
10         }
11     }
12
13     return new F();
14 }
15
16 var penguin = prototypeExtend({
17     speed: 20,
18     swim: function () {
19         console.log('游泳:' + this.speed);
20     },
21     run: function (speed) {
22         console.log('奔跑:' + speed);
23     },
24     jump: function () {
25         console.log('跳跃');
26     }
27 })

转载于:https://www.cnblogs.com/CoffeeEddy/p/6891505.html

js 设计模式学习（3）相关推荐

useRef与JS设计模式学习(一)
useRef与JS设计模式学习(一) useRef const refContainer = useRef(initialValue); 使用useRef Hook,你可以轻松的获取到dom的ref. ...
js 设计模式学习（1）
最近一个人外出旅行顺便在那座城市买了一本关于JS设计模式的书供无聊的时候阅读却发现小有收获旅游回来以后立马写下心得做了一个地图并以此总结此次旅行的经过的地方尝试1: 尝试写JS类 1 v ...
js设计模式学习之单例模式
单例模式保证一个类仅有一个实例,并提供一个访问它的全局访问点实现一个单例模式用一个变量标志当前是否已经为某个类型创建过对象,如果是,则下次直接返回之前创建的对象. var Singleton = ...
JS设计模式学习 - 代理模式
代理模式(Proxy) 为一个对象提供一个代用品或占位符,以便控制对它们的访问. 代理模式是一种非常有意义的模式,在生活中可以找到很多代理模式的场景.比如,明星都有经纪人作为代理. 代理模式的关键是, ...
JS设计模式学习实例之单例模式
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><ti ...
7 种 Javascript 常用设计模式学习笔记
7 种 Javascript 常用设计模式学习笔记由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式本文的 ...
JS设计模式--组合模式
JS设计模式–组合模式昨天学习了白贺翔老师的JS组合模式,现在把我学到的分享出来叭O(∩_∩)O,直接看下面代码 <!DOCTYPE html> <html lang=" ...
js设计模式笔记小结
JS 设计模式面向对象搭建开发环境 npm / webapck / webpack-dev-server / babel babel-core babel-loader babel-polyfil ...
java/android 设计模式学习笔记（1）--- 单例模式
前段时间公司一些同事在讨论单例模式(我是最渣的一个,都插不上嘴 T__T ),这个模式使用的频率很高,也可能是很多人最熟悉的设计模式,当然单例模式也算是最简单的设计模式之一吧,简单归简单,但是在实际使 ...

js 设计模式学习（3）

js 设计模式学习（3）相关推荐

最新文章

热门文章