基础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 ...
随机推荐
- 基于PYQT5的截图翻译工具
基于PYQT5的截图翻译工具 功能介绍 翻译功能 截图功能(快捷键 + 截图存储到剪切板中) 文字识别OCR(基于百度API的文字识别) UI 界面 截图 截图可以使用第三方截图 或 使用PyQt5截 ...
- k8s中label和label selector的基本概念及使用方法
1.概述 在k8s中,有一个非常核心的概念,就是label(标签),以及对label的使用,label selector. 本文档中,我们就来看看:1.什么是标签,2.如何定义标签,3.什么是标签选择 ...
- python变量名下划线
xx: 公有变量 _x: 单前置下划线,保护变量,私有化属性或方法,不能用于'from module import *' 以单下划线开头的表示的是protected类型的变量.即保护类型只能允许其/类 ...
- mysql数据恢复 根据旧备份的sql文件和当前data下的ibd文件恢复innodb引擎数据
1.使用navicat fro mysql数据库工具进行恢复 2.将原有备份的sql文件导入数据库 3.新建一个空数据库 4将备份数据库的数据表复制到新建数据库(只复制表格式) 5.在命令行模式中 u ...
- php 图片转换二进制数
$image = "1.jpg"; //图片地址 $fp = fopen($image, 'rb'); $content = fread($fp, filesize($image) ...
- vscode常用插件快捷键
俗话说,工欲善其事必先利其器,我们码农的器是什么尼?没错,就是我们亲爱的IDE,前端开发者最爱的编辑器应该是vscode了吧.但是我们要怎么去锋利它尼?不外乎就是熟悉它的使用方法.快捷键以及第三方的插 ...
- Java获取汉字的大小写拼音码(汉字的拼音首字母)
import java.io.UnsupportedEncodingException; /** * 获取拼音码 * * @author xmj * */ public class GetPinyin ...
- Educational Codeforces Round 129 (Rated for Div. 2) A-D
Educational Codeforces Round 129 (Rated for Div. 2) A-D A 题目 https://codeforces.com/contest/1681/pro ...
- 015(Power string)(哈希表)
题目:http://ybt.ssoier.cn:8088/problem_show.php?pid=1457 题目思路: 思路就是预设子串的长度,从1开始,而后一段一段试 试到一个对不上的就打回 如果 ...
- windows版anaconda+CUDA9.0+cudnn7+pytorch+tensorflow安装
1.Anaconda 首先下载Anaconda,它是一个开源的python发行版本,含有众多科学工具包,直接安装anaconda免除了许多包的手动安装,点击这里下载. 按照你的实际情况选择下载.下载完 ...