关于js的对象创建方法(简单工厂模式,构造函数模式,原型模式,混合模式,动态模式)
// 1.工厂方式创建对象:面向对象中的封装函数(内置对象)
简单来说就是封装后的代码,简单的工厂模式是很好理解的,关于它的作用,就是利用面向对象的方法,把一些对象封装,使一些占用空间多的,重复的代码封装起来。实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性以及方法再将对象返回即可。
function createPerson(name){
var obj=new Object();//1.原料
//2.加工
obj.name=name;
obj.showName=function(){
alert(this.name);
}
return obj;//3.出厂
}
可以看出,使用工厂模式,可以重复调用这个per函数来生成不同属性值得对象,这就像工厂一样,批量生产,里面的原料,加工,出厂都很清晰。但是你会发现工厂模式是无法识别对象的类型,因为全都是object,不像Date,Array等,但是构造函数就不是了。这还只是简单的工厂模式,复杂的工厂模式(抽象模式)等以后再回来详细了解。
//2、构造函数创建对象
//当new去调用一个函数,这个时候函数中的this就是创建出来的对象,而且函数的返回值就是this(隐式返回)
//new后面的函数叫做构造函数
// <1>有参数的构造函数
function CreatePerson(name){
this.name=name;
this.showName=function(){
alert(this.name);
}
}
var p1=new CreatePerson('小米');
p1.showName();
// <2>无参数的构造函数
function CreatePerson(){}
var p1=new CreatePerson();
p1.name="吃丸子";
p1.showName=function(){
alert(p1.name);
}
p1.showName();
// 3.用原型方式
function Person(){}js规定每一个创建的函数都有prototype(原型)属性,这个属性是指针,指向一个对象,而这个对象的用途是包含由特定类型的所有实例所共享的属性和方法,使用原型对象就可以让所有实例对象均包含这些属性及方法。
Person.prototype.name="hello";
Person.prototype.showName=function(){
alert(this.name);
}
var p1=new Person();
p1.showName();
关于原型模式的缺点,我想也是很明显的,它省略了构造函数传递初始化参数这一环节,结果所有实例均在默认情况下取得了相同的属性值,虽然你可以在后来做出更改,但一点都不方便,这样还不是最大的问题,原型模式最大的问题是在于共享的本性所导致的,由于共享,因此一个实例修改了引用,另一个也随之更改了属性。因此一般不会单独使用原型模式。
//4.混合构造函数和原型模式
function CreatePerson(name){
this.name=name;
}
CreatePerson.prototype.showName=function(){
alert(this.name);
}
var p1=new CreatePerson("加油");
p1.showName();
var p2=new CreatePerson("加油呀!");
p2.showName();
alert(p1.showName==p2.showName);//true;原因:都是在原型下面,在内存中只存在一份,地址相同
function per(name){
this.name=name;
}
per.prototype.say=function(){
alert(this.name);
}
var per1=new per('lyf');
var per2=new per ('xiaoai');
per1.say();
per2.say();
//<5>动态模式
function per(name){
this.name=name;
if(typeof this.say!='function'){
// 这段代码只执行了一次
per.prototype.say=function(){
console.log(this.name);
}
}
}
var per1=new per('katherine');
var per2=new per('xiaoai');
per1.say();
per2.say();
动态原型模式将所有的信息都封装进了构造函数中,通过构造函数中初始化原型,仅第一个对象实例实例化时初始化,通过判断该方法是否有效存在而选择是否需要初始化。大白话就是:如果去掉if的话,每new一次(即每当一个实例对象生产时),都会重新定义一个新的函数,然后挂到per.prototype.say上,而实际上,只需要定义一次就够了,因为所有的实例都会共享此属性的,所以如果去掉if的话,会造成没有必要的时间和空间的浪费,而加上if后,只在new第一次实例化时会定义say方法,之后都不会再定义了。可以看出对于这种模式创建的对象,是最好的了。
关于js的对象创建方法(简单工厂模式,构造函数模式,原型模式,混合模式,动态模式)的更多相关文章
- js中对象和对象创建方法
这一次我们来说一说在JavaScript中经常会用到的一个复杂基本类型,对象,先从对象的属性讲起,再讲对象的创建方法,基本涵盖了创建对象的各种方法,大家一起学习呀~ 一.对象 要掌握对象的使用及继承, ...
- JS中的对象和方法简单剖析
众所周知,在js中对象就是精髓,不理解对象就是不理解js. 那么什么事js中的对象呢? 在js中,几乎一切皆对象: Boolean ,String,Number可以是对象(或者说原生数据被认作对象): ...
- 【原】js数组对象去重最简单的方法
简单的数组去重是比较简单的,方法也特别多,如给下面的数组去重: let arr = [1,2,2,4,9,6,7,5,2,3,5,6,5] 最常用的可以用for循环套for循环,再用splice删除重 ...
- JS常用的设计模式(2)——简单工厂模式
简单工厂模式是由一个方法来决定到底要创建哪个类的实例, 而这些实例经常都拥有相同的接口. 这种模式主要用在所实例化的类型在编译期并不能确定, 而是在执行期决定的情况. 说的通俗点,就像公司茶水间的饮料 ...
- 对JS关于对象创建的几种方式的整理
最近一直在看JS高级程序设计这本书,有空来梳理一下几种创建对象的方式.话不多说,直接步入正题. 第一种:Object构造函数创建 var Person = new Object();Person.na ...
- 用ES6创建一个简单工厂模式
1 什么是工厂模式? 工厂模式是用来创建对象的一种最常用的设计模式.我们不暴露创建对象的具体逻辑,而是将将逻辑封装在一个函数中,那么这个函数就可以被视为一个工厂.工厂模式根据抽象程度的不同可以分为:简 ...
- 《JS设计模式笔记》 2,简单工厂模式
<script type="text/javascript"> //简单工厂模式 //定义:由一个方法来决定到底要创建哪个类的实例,而这些实例经常拥有相同的接口.其实例 ...
- 第163天:js面向对象-对象创建方式总结
面向对象-对象创建方式总结 1. 创建对象的方式,json方式 推荐使用的场合: 作为函数的参数,临时只用一次的场景.比如设置函数原型对象. var obj = {}; //对象有自己的 属性 和 行 ...
- [JavaScript]对象创建方法
1.使用Object或对象字面量创建对象 (1)使用Object创建对象 var cat= new Object(); cat.name = "Tom"; cat.color= & ...
随机推荐
- SpringBoot整合shiro实现用户的认证授权
* 项目环境搭建 * 配置ShiroConfig,用于shiro的基本配置和注入自定义规则 * 实现自定义的realm,继承AuthorizingRealm * 编写测试controller和页面 基 ...
- webpack(import路径配置)(自动打开浏览器)(自定义运行命令)
- Deep Dream 模型
本节的代码参考了TensorFlow 源码中的示例程序https://github.com/tensorflow/tensorflow/tree/master/tensorflow/examples/ ...
- HTML基础【1】:认识 HTML
什么是HTML HTML其实是 HyperText Markup Language 的缩写,超文本标记语言 HTML的作用 1.首先利用记事本保存了一个标题和两段描述, 然后修改纯文本文件的扩展名 ...
- 在 mac iTerm2 中使用 cmd 终端
在 mac iTerm2 中使用 cmd 终端 主要是因为要在 window 中做一些命令行上的工作, 但又不想切换到整个 window 系统里面去. 在程序和功能中开启 telnet 在服务中启用 ...
- redis缓存服务器集群搭建
一.安装redis 1.下载redis [root@redis ~]# wget http://download.redis.io/releases/redis-4.0.11.tar.gz 2.安装编 ...
- python+selenium,实现带有验证码的自动化登录功能
python+selenium的环境准备,请自行安装完成,这里直接贴代码,方便做项目时直接使用. import time from selenium import webdriver from PIL ...
- R多行交叉作图
#中文 UTF-8编码 3.4.0library(Hmisc)mydata = read.table('clipboard',header = T)head(mydata)mycol=c(rgb( ...
- 安卓下设置系统字体大小影响H5页面布局
问题描述: 调整好的h5页面,放在安卓app内嵌页面后布局正常,后来用户调整系统里面字体大小,后内嵌H5布局乱掉 问题分析: 因为用户调整了系统字体的大小,修改了根节点和body节点的font-siz ...
- python学习(九)