字面量和构造函数模式

字面量

var dog={}
dog.name="benji";   //属性
dog.getName=function(){   //方法return this.name;
}
复制代码

构造函数

var dog=new Object();
dog.name="benji";
dog.getName=function(){   return this.name;
}
复制代码

字面量和构造函数对比

字面量更简洁
字面量强调对象实际是一组键值对
你可能创建一个本地构造函数同名为Object,所以会一直顺着原型链往上查询，直到找到local object()或global.object(),消耗性能

自定义构造函数

var Person=function(name){this.name=name;this.say=function(){return "i am"+this.name}
}
复制代码

工作原理：

var Person=function(name){var this=Object.create(Person.prototype);this.name=name;this.say=function(){return "i am"+this.name}return this;   //隐式返回
}为了不在每个实例中都产生say(),优化如下:Person.prototype.say=function(){return "i am"+this.name;
}默认返回this,但你也可以返回别的:var Person=function(name){this.name=name;this.say=function(){return "i am"+this.name}var that={};that.name="benji";return that;   //显式返回
}let obj=new Person('kaola');
console.log(obj.name)  //benji
复制代码

当忘记new调用构造函数时会发生什么？

function Dog(){this.name="benji"
}var obj1=new Dog();
console.log(obj1.name) //benjivar obj2=Dog();
console.log(obj2.name) //undefined
console.log(window.name) //benji当忘记使用new调用构造函数时，函数中的this会指向全局对象，在浏览器中即window，这样将会引起一系列意外复制代码

以下几种方法避免这个问题：

构造函数名字开头大写
不隐式返回this,用return that替代，但这个模式问题在于，任何加在prototype上的属性或方法将遗失
自调用:

function Dog(){if(!this instanceof Dog){return new Dog()}this.name="benji"
}Dog.prototype.getName=function(){return this.name
}let obj=Dog();
obj.name //benji
obj.getName() //benji
复制代码

转载于:https://juejin.im/post/5b602bfbe51d4519226f8f80

js设计模式每次10分钟:字面量和构造函数模式对比相关推荐

每次10分钟免费网络电话，无限次数
超强免费网络电话,无限次数,每次10分钟测试已一月,每次通话10分钟,不限次数, 拨打国内电话: 86+区号(区号前减个0)+座机号如: 拨打 028 66324449 应拨( ...
js实现数字以5为单位向上取整/js时间以10分钟向上取整
//js实现数字以5为单位向上取整 parseInt((x / 5) + 1) * 5;//实例 parseInt((11 / 5) + 1) * 5; //15 parseInt((15 / 5) ...
js关于字面量与构造函数创建对象的几点理解
2019独角兽企业重金招聘Python工程师标准>>> 一.在javascript中没有所谓的空对象,即使最简单的{}也具有从Object.prototype继承的方法和属性. 二. ...
JavaScript模式读书笔记第3章字面量和构造函数
1,对象字面量 -1,Javascript中所创建的自定义对象在任务时候都是可变的.可以从一个空对象开始,根据需要增加函数.对象字面量模式可以使我们在创建对象的时候向其添加函数. ...
【设计模式】适配器模式 ( 概念 | 适用场景 | 优缺点 | 外观模式对比 | 适配器模式相关角色 | 类适配器 | 对象适配器 | 实现流程 )
文章目录 I . 适配器模式概念 II . 适配器模式适用场景 III . 适配器模式优缺点 IV . 适配器模式与外观模式对比 V . 适配器模式相关角色 ( 重点 ) VI . 适配器模 ...
设计模式（10）--蝇量模式
蝇量模式(轻量级模式)也叫享元模式(共用一个方法) 景观设计软件项目遇到的问题: 设置一个公园或者小区,会有树的大小,外观等等虽然对象不复杂,但是如果量大就会消耗很多内存,比如10000000棵树 ...
设计模式【10】-- 顺便看看享元模式
开局还是那种图,各位客官往下看- 享元模式是什么? 享元模式(FlyWeight),是结构型模式的一种,主要是为了减少创建对象的数量,减少内存占用以及提高性能.说到这里,不知道你是否会想到池技术,比如 ...
2023-01-26 JS设计模式-单例模式:单例模式的原理和实现,懒汉模式和饿汉模式,单例模式实现登录框
文章目录 1.什么是单例模式? 介绍特点结构 2.如何实现一个单例模式? 思路实现代码 3.单例模式的优缺点 4.懒汉模式和饿汉模式懒汉模式:一开始不会实例化,什么时候用才new出来实例化饿 ...
[导入]C#面向对象设计模式纵横谈(10)：Decorator 装饰模式(结构型模式).zip(9.84 MB)...
讲座内容: 本培训课程探讨GoF23之Decorator 装饰模式的意图.动因.原理.应用场景与C#语言实现,以及该模式在.NET框架程序设计中的具体应用. 课程讲师: 李建忠上海祝成信息科技有限公 ...

js设计模式每次10分钟:字面量和构造函数模式对比

字面量和构造函数模式

字面量

构造函数

字面量和构造函数对比

自定义构造函数

js设计模式每次10分钟:字面量和构造函数模式对比相关推荐

最新文章

热门文章