设计模式

创建自定义对象的最简单方式是new 一个object对象，然后给它添加方法与属性

如：

1 var person = new Object();

2 person.name = "张三";3 person.sayName = function(){4     alert(this.name);5 }

//简单创建对象

这种方式有个很大的缺点：复用性太低，实例化一个这样的实体，就得复制上的面的代码。

于是想到了用工厂模式改进它：工厂抽象了创造的具体对象过程，但ECMScript没有类的概念，这让人很纠结，聪明的先行者，发明了一种函数代替它。

function  CreatePersonFactory(_name,_age){var obj = new Object();        obj.name = _name;       obj.age = _age;       obj.sayName = function(){              alert(this.name);       }return obj;}

var p1 = CreatePersonFactory("张三",22);var p2 = CreatePersonFactory("李四",23);

//工厂模式

这种方式虽然解决了复用的问题，但因为无法识对象（无法知道这个对象的类型，因为它统一返回Object的实例对象，如果我想针对某类型进行扩展，就得哭了）。

需求变了，模式只能再改了。构造函数模式就这样诞生了。

function ConstructFun(_name,_age){this.name = _name;this.age = _age;this.sayName = function(){alert(this.name);}
}var p1= new ConstructFun("stick",22);
var p2 = new ConstructFun("dev",23);p1.sayName();p2.sayName();
document.write(p1.constructor == ConstructFun);
document.write(p2.constructor == ConstructFun);
//constructor是用来识别用户类型。检测对象类型用instanceof,检测值类型用typeof
document.write(p1 instanceof ConstructFun);
document.write(p2 instanceof Object);
//可以通过让方法放到外面来避免每一次都得实例化。
function ConstructFun(_name,_age){//.....this.sayName = sayName;
}
function sayName(){alert(alert.name);
}

//构造函数模式

对比工厂与构造两种函数：工厂显示实例化Object并返回它;构造函数它继承Object,显示实例化当前对象,直接将属性与方法赋于this,没有return语句。构造函数：任何以new操作操作符调用，它就是构造函数。

这种方式定义的对象是在Global对象中,(浏览器为window对象)无特殊说明：instanceof和constructor属性终始会假设在全局作用域中查询构造函数。

[Nothing is perfect]构造函数的问题是每个方法都得实例化一次，对于实现同一功能的方法，完全没有必要。

为什么每个方法都得实例化一下，这是因为EMCScript中的函数是对象，两个方法不是Function同一个实例。虽然通过利用this,关键字把方法放到外面去，可以避免同一方法多次实例化问题的。但是这样一来这个方法就成了全局函数,如此对象有很多方法，就定义很多全局函数，与封装性违背

这时候冒出原型模式来处理这个问题。

转载于:https://www.cnblogs.com/gs-lv/archive/2012/03/19/2405407.html

js 设计模式与继承学习相关推荐

useRef与JS设计模式学习(一)
useRef与JS设计模式学习(一) useRef const refContainer = useRef(initialValue); 使用useRef Hook,你可以轻松的获取到dom的ref. ...
js 设计模式学习（1）
最近一个人外出旅行顺便在那座城市买了一本关于JS设计模式的书供无聊的时候阅读却发现小有收获旅游回来以后立马写下心得做了一个地图并以此总结此次旅行的经过的地方尝试1: 尝试写JS类 1 v ...
js设计模式笔记小结
JS 设计模式面向对象搭建开发环境 npm / webapck / webpack-dev-server / babel babel-core babel-loader babel-polyfil ...
php中可以实现多态的是继承,PHP设计模式通过继承实现多态
/* ?* WEB开发笔记 www.chhua.com 每日练习之PHP设计模式继承的实现 ?*/ /* ?* 类说明:某大学开两门课程,一个是PHP,一个是JAVA,规定不同的价格 ?*/ abst ...
js observer 添加_简单了解4种JS设计模式
阅读本文约需要5分钟大家好,我是你们的导师,我每天都会在这里给大家分享一些干货内容(当然了,周末也要允许老师休息一下哈).上次老师跟大家分享了15款有用前端开发的ST插件的知识,今天跟大家分享下4种 ...
哪些设计模式最值得学习
最近又在首页看到几篇设计模式相关的学习随笔.回想起来,这几年在园子里发布的有关设计模式的随笔都有一个共同的特点.那就是Factory和Singleton居多,如果是系列的,也往往是从这两个模式开始的. ...
详细记录基于vue+nodejs+mongodb构建的商城学习（四）基于项目的node.js开发后端的学习与梳理总结...
前置: 本系列文章是一个本人边学习边梳理的学习笔记,俗话说好脑袋不如烂笔头,再好的记忆力时间长了也会有细节忘记,本项目选择的前端框架是vue,后端开发使用是node.js,数据库使用的是mongodb ...
设计模式之禅学习总结
设计模式之禅学习总结单一职责原则 SRP 里式替换原则 LSP 依赖倒置原则 DIP 接口隔离原则迪米特法则LoD 开闭原则: 单例模式单例模式的通用类图如下图单例模式的优点单例模式的缺点 ...
Vue.js实战之系统学习第七节
想看上一节的请点击: Vue.js实战之系统学习第六节接下来我们要学习第七节了,时间过的好快. 组件详解组件是Vue.js的核心功能,也是整个框架设计最精彩的地方,当然也是最难掌握的.本章节将带你 ...

js 设计模式与继承学习

设计模式

js 设计模式与继承学习相关推荐

最新文章

热门文章