js 创建对象的多种方式与优缺点小结

目录
  • 早期创建方式
  • 工厂模式
  • 构造函数模式
  • 构造函数模式优化
  • 原型模式
  • 构造函数和原型模式组合
  • 动态原型模式
  • 寄生构造函数模式
  • 稳妥构造函数模式

早期创建方式

var obj = new Object()
obj.name ='xxx'
obj.age = 18
或使用对象字面量
var o1 = {
  name: 'xxx',
  say: () => {}
}
var o2 = {
  name: 'xxx',
  say: () => {}
}

缺点：使用同一个接口创建很多对象，会产生大量重复代码

工厂模式

function factory(name,age) {
  var obj = new Object()
  obj.name = name
  obj.age = age
  return obj
}
var o1 = factory(1, 11)
var o2 = factory(2, 22)

优点：解决了创建多个相似对象代码重复问题
缺点：无法识别对象是什么类型

构造函数模式

ECMAScript中可以使用构造函数创建特定类型的对象，如Object，Array这种原生构造函数。此外，也可以创建自定义构造函数，从而定义自定义对象的属性和方法。

function Person(name, age) {
  this.name = name
  this.age = age
  this.sayName = function() {
    console.log(this.name)
  }
}
var o1 = new Person(1,11)
var o2 = new Person(2,22)
o1.sayName() // 1
o2.sayName() // 2

优点：构造函数模式创建的实例可以区分类型标识(instanceof 判断)
缺点：每个方法都需要在实例上重新创建，如 两个实例的sayName方法任务相同，但是实际创建了两个Function实例

构造函数模式优化

function Person(name, age) {
  this.name = name
  this.age = age
}
function sayName () {
  console.log(this.name)
}
var o1 = new Person(1,11)
var o2 = new Person(2,22)
o1.sayName() // 1
o2.sayName() // 2

优点：多个实例共享在全局作用域中定义的函数，解决了两个函数做同一件事的问题
缺点：全局作用域定义的函数实际上只能被某个对象调用，全局作用域名不副实，而且如果对象需要定义很多方法，需要创建很多个全局函数，这让自定义的对象类型没有封装特性。

原型模式

我们创建的每个函数都有一个protoype属性，这个属性是一个指针，指向一个对象。这个对象的用途是包含了可以由特定类型的所有实例共享的属性和方法。即prototype就是由构造函数创建的那个对象实例的原型对象。

function Person(){}
Person.prototype.name = '123'
Person.prototype.age = 18
Person.prototype.sayName = function() {
  console.log(this.name)
}
var o1 = new Person(1,11)
var o2 = new Person(2,22)
o1.sayName() // 123
o2.sayName() // 123

优点：解决了实例共享属性或事件的问题
缺点：因为实例共享属性的原因，对于值为引用类型的属性来说，一个实例的修改会导致其他实例访问值更改。如：

function Person(){}
Person.prototype.name = '123'
Person.prototype.age = 18
Person.prototype.friends = ['a', 'b']
Person.prototype.sayName = function() {
  console.log(this.name)
}
var o1 = new Person(1,11)
var o2 = new Person(2,22)
o1.friends.push('c')
console.log(o2.friends) // ['a', 'b', 'c']

构造函数和原型模式组合

function Person(name, age) {
  this.name = name
  this.age = age
  this.friends = ['a']
}
Person.prototype = {
  constructor: Person,
  sayName: function() {
    console.log(this.name)
  }
}
var o1 = new Person(1,11)
var o2 = new Person(2,22)
o1.sayName() // 1
o2.sayName() // 2

优点：每个实例有自己的属性，同时又共享着方法的引用，还支持传参数

动态原型模式

function Person(name, age) {
  this.name = name
  this.age = age
  this.friends = ['a']
  if(typeof this.sayName != 'function') {
    Person.prototype.sayName = function() {
      console.log(this.name)
    }
  }
}
var o1 = new Person(1,11)
var o2 = new Person(2,22)
o1.sayName() // 1
o2.sayName() // 2

优点：仅在方法不存在的时候创建一次，避免重复创建

寄生构造函数模式

function SpecialArray() {
  var o = new Array()
  // 添加值
  o.push.apply(o, arguments)
  // 添加方法
  o.toPipedString = function(){
    return this.join('|')
  }
  return o
}
var o1 = new SpecialArray(1,11)
o1.toPipedString() // 1|11

优点：在不更改原始构造函数的情况下为对象添加特殊方法
缺点：返回的对象与构造函数以及构造函数的原型没有任何关系，该方法与在构造函数外部创建的对象没有什么不同

稳妥构造函数模式

function Person(name) {
  var o = new Object()
  // 添加方法
  o.getName = function(){
    return name
  }
  return o
}
var o1 = new Person(1)
o1.getName() // 1

与寄生构造函数不同在于，不使用this，不使用new调用
优点：除了使用getName外没有任何方法能够访问name，在一些安全的环境使用
缺点：与工厂模式相似，无法识别对象所属类型

以上就是js 创建对象的多种方式与优缺点小结的详细内容，更多关于js 创建对象的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • js面向对象方式实现拖拽效果

    js面向对象方式实现拖拽效果

    本文实例为大家分享了js面向对象方式实现拖拽的具体代码,供大家参考,具体内容如下 拖拽功能的实现原理:(直接拿走!) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&qu

  • 比较JavaScript对象的四种方式

    目录 前言 引用比较 手动比较 浅层比较 深层比较 总结 前言 比较JavaScript中的原始值非常简单.只需使用任何一种可用的相等运算符即可,例如严格相等运算符: 'a' === 'c'; // => false 1 === 1; // => true 但是对象却有结构化数据,所以比较起来比较困难.在本文中,你将学习如何正确比较JavaScript中的对象. 引用比较 JavaScript 提供了 3 种对值进行比较的方法: 严格相等运算符=== 宽松相等运算符== Object.is()

  • 一起深入理解js中的事件对象

    一起深入理解js中的事件对象

    我们知道在JS中常用的事件有: 页面事件:load: 焦点事件:focus,blur: 鼠标事件:click,mouseout,mouseover,mousemove等: 键盘事件:keydown,keyup,keypress: form表单事件:reset,submit: 内容变化事件:change,input 那JS中"事件对象",到底是个什么东西? 首先,什么是事件呢? 首先说JS就是为了实现一些动态的操作,而用户会有时候想去实现一些功能,如提交表单,鼠标点击等,就要在浏览器中触

  • java对象和json的来回转换知识点总结

    为了是java中的对象便于理解,我们可以使用一款比较好用的数据格式,在数据解析的时候也会经常用到,它就是JSON.在这里我们转换对象和字符串时,需要java先变成json对象的模式.为了防止有人对JSON数组和对象的概念混淆,我们会先对这两个概念理解,然后带来java对象和json的来回转换的方法. 1.JSON数组和对象的区别 JSONArray是将数据转换为数组形式: strArray:[{"address":"北京市西城区","age":&

  • AngularJS equal比较对象实例详解

    使用情况 1 首先,所有满足 a === 3 这种的对象,在angular.equals(a,b)中都会返回真 2 所有对象的类型,以及属性值都相同的,也会返回真 3 NaN和NaN也会返回真(在javascript中,返回的是假) 4 正则也会返回真(在javascirpt,/abc/ /abc/被认为是不相等的) 样例 <html> <head> <meta http-equiv="Content-Type" content="text/ht

  • 详解js创建对象的几种方式和对象方法

    这篇文章是看js红宝书第8章,记的关于对象的笔记(第二篇). 创建对象的几种模式: 工厂模式: 工厂是函数的意思.工厂模式核心是定义一个返回全新对象的函数. function getObj(name, age) { let obj = {} obj.name = name obj.age = age return obj } let person1 = getObj("cc", 31) 缺点:不知道新创建的对象是什么类型 构造函数模式: 通过一个构造函数,得到一个对象实例. 构造函数和

  • 全面解析js中的原型,原型对象,原型链

    全面解析js中的原型,原型对象,原型链

    理解原型 我们创建的每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法.看如下例子: function Person(){ } Person.prototype.name = 'ccc' Person.prototype.age = 18 Person.prototype.sayName = function (){ console.log(this.name); } var person1 = ne

  • 12种JavaScript常用的MVC框架比较分析

    本文详细讲述了12种JavaScript常用的MVC框架.分享给大家供大家参考,具体如下: Gordon L. Hempton是西雅图的一位黑客和设计师,他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架,并在博客中总结了每种框架的优缺点,最终的结果是,Ember.js胜出. 此次比较针对的特性标准有四种,分别是: ① UI绑定(UI Bindings) ② 复合视图(Composed Views) ③ Web表现层(Web Presentation Layer) ④

  • Javascript编程中几种继承方式比较分析

    本文实例分析了Javascript编程中几种继承方式比较.分享给大家供大家参考,具体如下: 开篇 从'严格'意义上说,javascript并不是一门真正的面向对象语言.这种说法原因一般都是觉得javascript作为一门弱类型语言与类似java或c#之类的强型语言的继承方式有很大的区别,因而默认它就是非主流的面向对象方式,甚至竟有很多书将其描述为'非完全面向对象'语言.其实个人觉得,什么方式并不重要,重要的是是否具有面向对象的思想,说javascript不是面向对象语言的,往往都可能没有深入研究

  • js 创建对象的多种方式与优缺点小结

    目录 早期创建方式 工厂模式 构造函数模式 构造函数模式优化 原型模式 构造函数和原型模式组合 动态原型模式 寄生构造函数模式 稳妥构造函数模式 早期创建方式 var obj = new Object() obj.name ='xxx' obj.age = 18 或使用对象字面量 var o1 = { name: 'xxx', say: () => {} } var o2 = { name: 'xxx', say: () => {} } 缺点:使用同一个接口创建很多对象,会产生大量重复代码 工

  • 深入理解JavaScript创建对象的多种方式以及优缺点

    写在前面 这篇文章讲解创建对象的各种方式,以及优缺点. 但是注意: 这篇文章更像是笔记,因为<JavaScript高级程序设计>写得真是太好了! 1. 工厂模式 function createPerson(name) { var o = new Object(); o.name = name; o.getName = function () { console.log(this.name); }; return o; } var person1 = createPerson('kevin');

  • js创建对象几种方式的优缺点对比

    比较js中创建对象的几种方式 1.工厂模式 function createObj(name, sex){ var obj = new Object(); obj.name = name; obj.sex = sex; obj.sayName = function(){ alert(this.name); } return obj; } var person = createObj('Tom', 'man'); 缺点:①无法确定对象的类型(因为都是Object). ②创建的多个对象之间没有关联.

  • JS中检测数据类型的几种方式及优缺点小结

    1.typeof 用来检测数据类型的运算符 typeof value 返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number"."string"."boolean"."undefined"."object"."function" 局限性: 1)typeof null ->"object" 2)检测的不管是数组还是正则都返回的是"ob

  • 深入讲解JavaScript之继承的多种方式和优缺点

    目录 1.原型链继承 2.借用构造函数(经典继承) 3.组合继承 4.原型式继承 5. 寄生式继承 6. 寄生组合式继承 1.原型链继承 function Parent () { this.name = 'kevin'; } Parent.prototype.getName = function () { console.log(this.name); } function Child () { } Child.prototype = new Parent(); var child1 = new

  • vue引用js文件的多种方式(推荐)

    1.vue-cli webpack全局引入jquery (1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖.) (2)在webpack.base.conf.js里加入 var webpack = require("webpack") (3)在module.exports的最后加入 plugins: [ new webpack.optimize.CommonsChu

  • 深入理解JavaScript继承的多种方式和优缺点

    写在前面 本文讲解JavaScript各种继承方式和优缺点. 注意: 跟<JavaScript深入之创建对象>一样,更像是笔记. 哎,再让我感叹一句:<JavaScript高级程序设计>写得真是太好了! 1.原型链继承 function Parent () { this.name = 'kevin'; } Parent.prototype.getName = function () { console.log(this.name); } function Child () { }

  • 6种JavaScript继承方式及优缺点(小结)

    温馨提示:想要更好的理解JS继承方式,须了解构造函数.原型对象.实例化对象.原型链等概念 第一种:原型链继承 利用原型链的特点进行继承 function Parent(){ this.name = 'web前端'; this.type = ['JS','HTML','CSS']; } Parent.prototype.Say=function(){ console.log(this.name); } function Son(){}; Son.prototype = new Parent();

  • JS中的六种继承方式以及优缺点总结

    JS中的六种继承方式以及优缺点总结

    目录 前言 原型链继承 构造函数继承 组合继承(原型链继承和构造函数继承组合) 寄生式继承 组合寄生式继承 extends继承 总结 前言 继承是JS世界中必不可少的一个环节,号称JS的三座大山之一,使用这种方式我们可以更好地复用以前的开发代码,缩短开发的周期.提升开发效率 在ES6之前,JS中的类都是通过构造函数模拟的,并不存在真正意义上的类,虽然ES6的类知识一个语法糖

  • JS中多种方式创建对象详解

    1.内置对象创建 var girl=new Object(); girl.name='hxl'; console.log(typeof girl); 2.工厂模式,寄生构造函数模式 function Person(name){ var p=new Object();//内部进行实例化 p.name=name; p.say=function(){ console.log('my name is '+ p.name); } return p;//注:一定要返回 } var girl=Person('

随机推荐