基础2:js创建对象的多种方式
js创建对象的多种方式
1. 工厂模式
function createPerson(name) {
var o = new Object()
0.name = name
return o
}
var person1 = createPerson('xwk')
缺点:创造出来的对象无法识别,因为都指向同一个原型。
2. 构造函数模式
function Person(name) {
this.name = name
this.getName = function() {
console.log(this.name)
}
}
var person1 = new Person('xwk')
优点:实例可以识别为一个特定的类型
缺点:每次创建实例的时候,每个方法都要被创建一次
3. 原型模式
function Person(name) {}
Person.prototype.name = 'xwk'
Person.prototype.getName = function () {
console.log(this.name)
}
var person1 = new Person()
优点:方法是共用了,不会重复创建
缺点:1.没办法初始化参数 2. 所有的属性和方法都共享了
3.1 原型模式优化
function Person(name) {}
Person.prototype = {
name: 'xwk',
getName: function () {
console.log(this.name)
},
constructor: Person
}
var person1 = new Person()
优点:封装性好了点
缺点:原型模式该有的缺点还是有
4. 组合模式
构造函数模式 + 原型模式
共享的写在原型里,独立的写在构造函数中。
function Person(name) {
this.name = name
}
Person.prototype = {
constructor: Person,
getName: function () {
console.log(this.name);
}
};
var person1 = new Person();
优点:这种方式使用更广泛
4.1 动态原型模式
function Person(name) {
this.name = name;
if (typeof this.getName != "function") {
Person.prototype.getName = function () {
console.log(this.name);
}
}
}
var person1 = new Person();
但是注意️:使用动态原型模式的时候,不能对面量重写原型
解释下为什么:
function Person(name) {
this.name = name;
if (typeof this.getName != "function") {
Person.prototype = {
constructor: Person,
getName: function () {
console.log(this.name);
}
}
}
}
var person1 = new Person('kevin');
var person2 = new Person('daisy');
// 报错 并没有该方法
person1.getName();
// 注释掉上面的代码,这句是可以执行的。
person2.getName();
这是因为: var person1 = new Person('kevin') ,在执行这段代码的时候,new的过程分解如下,首先把 person1.__proto__
指向的是Person.prototype,我们可以认为是O1,其次再执行构造函数,发现没有getName,这时候把 Person.prototype 重新给复值给了一个新对象,我们认为是O2,但是此时person1的原型指向的是O1并不是O2,O1中并没有getName方法,person2的原型指向的是O2,所以可以正确执行。
可以修改代码:
function Person(name) {
this.name = name;
if (typeof this.getName != "function") {
Person.prototype = {
constructor: Person,
getName: function () {
console.log(this.name);
}
}
return new Person(name) // 修改方案一:首先实例化一次
// 修改方案二:
// 或者不要直接用字面量的方式赋值原型,修改之前的原型
// Person.prototype.getName = function() {console.log(this.name)}
}
}
var person1 = new Person('kevin');
var person2 = new Person('daisy');
person1.getName();
person2.getName();
5.1 寄生构造函数模式
所谓的寄生构造函数模式就是比工厂模式在创建对象的时候,多使用了一个new,实际上两者的结果是一样的。
但是作者可能是希望能像使用普通 Array 一样使用 SpecialArray,虽然把 SpecialArray 当成函数也一样能用,但是这并不是作者的本意,也变得不优雅。
function SpecialArray() {
var values = new Array();
for (var i = 0, len = arguments.length; i < len; i++) {
values.push(arguments[i]);
}
values.toPipedString = function () {
return this.join("|");
};
return values;
}
var colors = new SpecialArray('red', 'blue', 'green');
var colors2 = SpecialArray('red2', 'blue2', 'green2');
console.log(colors);
console.log(colors.toPipedString()); // red|blue|green
console.log(colors2);
5.2 稳妥构造函数模式
function person(name){
var o = new Object();
o.sayName = function(){
console.log(name);
};
return o;
}
var person1 = person('kevin');
person1.sayName(); // kevin
person1.name = "daisy";
person1.sayName(); // kevin
console.log(person1.name); // daisy
所谓稳妥对象,指的是没有公共属性,而且其方法也不引用 this 的对象。
与寄生构造函数模式有两点不同:
- 新创建的实例方法不引用 this
- 不使用 new 操作符调用构造函数
稳妥对象最适合在一些安全的环境中。
稳妥构造函数模式也跟工厂模式一样,无法识别对象所属类型。
基础2:js创建对象的多种方式的更多相关文章
- js 创建对象的多种方式
参考: javascript 高级程序设计第三版 工厂模式 12345678910 function (name) { var obj = new Object() obj.name = name o ...
- js创建对象的多种方式及优缺点
在js中,如果你想输入一个的信息,例如姓名,性别,年龄等,如果你用值类型来存储的话,那么你就必须要声明很多个变量才行,变量声明的多了的话,就会造成变量污染.所以最好的方式就是存储到对象中.下面能我就给 ...
- JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构
JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...
- HTML系列:js和css多种方式实现隔行变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Javascript深入之创建对象的多种方式以及优缺点
1.工厂模式 function createPerson(name) { var o = new Object(); o.name = name; o.getName = function() { c ...
- js创建对象的最佳方式
1.对象的定义 ECMAScript中,对象是一个无序属性集,这里的“属性”可以是基本值.对象或者函数 2.数据属性与访问器属性 数据属性即有值的属性,可以设置属性只读.不可删除.不可枚举等等 访问器 ...
- 基础3:js实现继承的多种方式
js实现继承的多种方式 1. 原型链继承 function Parent() { this.name = 'xwk' } Parent.prototype.getName = function() { ...
- JS基础语法---创建对象---三种方式创建对象:调用系统的构造函数;自定义构造函数;字面量的方式
创建对象三种方式: 调用系统的构造函数创建对象 自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象) 字面量的方式创建对象 第一种:调用系统的构造函数创建对象 //小苏举例子: //实例化对 ...
- javascript(js)创建对象的模式与继承的几种方式
1.js创建对象的几种方式 工厂模式 为什么会产生工厂模式,原因是使用同一个接口创建很多对象,会产生大量的重复代码,为了解决这个问题,产生了工厂模式. function createPerson(na ...
随机推荐
- liunx 服务器下面安装mysql8.0
闲来无事,准备自己搭建一个服务器高点事情,不可避免的就是需要使用到mysql数据库了.在Linux系统安装MySQL8.0,网上已经有很多的教程了,到自己安装的时候却发现各种各样的问题,现在把安装过程 ...
- 2021.06.12【NOIP提高B组】模拟 总结
T1 题目大意:有 \(n\) 个点,到点 \(i\) 可以获得 \(A_i\) ,同时消耗 \(B_i\) 若当前价值小于 \(B_i\) 则不能到,问从 \(P\) 开始,任一点结束后的最大值. ...
- Improved Security for a Ring-Based Fully Homomorphic Encryption Scheme-2013:解读
本文记录阅读此论文的笔记 摘要 (1)1996年,HPS三人提出一个格上的高效加密方案,叫做NTRUEncrypt,但是没有安全性证明:之后2011年,SS等人修改此方案,将其安全规约到标准格上的困难 ...
- 解决maven依赖冲突,这篇就够了!
一.前言 什么是依赖冲突 依赖冲突是指项目依赖的某一个jar包,有多个不同的版本,因而造成了包版本冲突. 依赖冲突的原因 我们在maven项目的pom中 一般会引用许许多多的dependency.例如 ...
- BUUCTF-FLAG
FLAG 16进制打开没看到有什么东西,使用binwalk分离也没看到其他文件,猜测是否使用lsb隐写方式. StegSolve打开 可以看到是压缩包的文件头,save bin保存为zip文件解压 提 ...
- 方法重载、方法重写、四种权限修饰、JavaBean、代码块
方法重载(overload) 一个类中可以含有多个重名的方法. 两同一不同 ①同一个类 ②同一个方法名 ③不同参数列表:参数个数不同,参数类型不同 方法重写(override) ①子类重写的方法的修饰 ...
- 全新升级的AOP框架Dora.Interception[4]: 基于Lambda表达式的拦截器注册方式
如果拦截器应用的目标类型是由自己定义的,Dora.Interception(github地址,觉得不错不妨给一颗星)可以在其类型或成员上标注InterceptorAttribute特性来应用对应的拦截 ...
- Linux文本三剑客-sed
sed工作原理: sed: Stream Editor.流编辑器 --- 属于行编辑工具 sed和vim一样都是文本编辑工具. 行编辑工具:一行一行处理文件内容 全屏编辑工具:一次性将文件内容加载到内 ...
- python小题目练习(13)
题目:封装用户的上网行为 实现代码: """Author:mllContent:封装用户的上网行为Date:2020-01-19"""def ...
- js与java encodeURI 进行编码与解码
JS escape()使用转义序列替换某些字符来对字符串进行编码 JavaScript 中国 编码后 JavaScript %u4E2D%u56FD unescape()对使用 encodeUR ...