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‘)

缺点:对象无法识别,因为所以的实例都指向一个原型

2.构造函数模式

function Person(name) {
  this.name = name;
  this.getName = function() {
    console.log(this.name);
  }
}

var person1 = new Person(‘kevin‘)

优点:实例可以识别为一个特定的类型

缺点:每次创建实例时,每个方法都要被创建一次

2.1构造函数模式优化

function Person(name) {
  this.name = name;
  this.getName = getName;
}

function getName() {
  console.log(this.name)
}

var person1 = new Person(‘kevin‘)

优点:解决了每个方法都要被重新创建的问题

缺点:这叫啥封装...

3.原型模式

function Person(name) {
}

Person.prototype.name = ‘kevin‘;
Person.prototype.getName = function() {
  console.log(this.name);
}
var person1 = new Person()

优点:方法不会重新创建

缺点:1.所有的属性和方法都共享 2.不能初始化参数

3.1原型模式优化

function Person(name) {

}

Person.prototype = {
  name: ‘kevin‘,
  getName: function(){
    console.log(this.name)
  }
}
var person1 = new Person()

优点:封装性好一点

缺点:重写了原型,丢失了 constructor属性

3.2 原型模式优化

function Person(name) {}
Person.prototype = {
  constructor: Person,
  name:‘kevin‘,
  getName: function() {
    console.log(this.name)
  }
}
var person1 = new Person()

优点:实例可以通过constructor属性找到所属构造函数

缺点:原型模式该有的缺点还是有

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(‘marven‘)

person1.getName() // 报错 并没有该方法

person2.getName() // 注释掉上面的代码,这句是可以执行的

原文地址:https://www.cnblogs.com/zhouyangla/p/8546329.html

时间: 2024-10-18 19:31:57

Javascript深入之创建对象的多种方式以及优缺点的相关文章

js创建对象的多种方式及优缺点

在js中,如果你想输入一个的信息,例如姓名,性别,年龄等,如果你用值类型来存储的话,那么你就必须要声明很多个变量才行,变量声明的多了的话,就会造成变量污染.所以最好的方式就是存储到对象中.下面能我就给大家介绍几种创建对象的方式,并且给大家说一下他们的优缺点 方式一:对象字面量 var obj={ name:"赵云", type:"突进", skill:"抢人头" } 缺点:只能创建一次对象,复用性较差,如果要创建多个对象,代码冗余度太高 方式二:

深入之创建对象的多种方式以及优缺点

// 1. 工厂模式 //缺点:对象无法识别,因为原型都指向Object function pe() { var o = new Object(); o.name = name; o.getname = function() { console.log(this.name) } return o } // 2. 构造函数模式 // 优点:实例可以识别为一个特定的类型 // 缺点:每次创建实例每个方法都要被创建一次 function Person(name) { this.name = name;

js 创建对象的多种方式

参考: javascript 高级程序设计第三版 工厂模式 12345678910 function (name) { var obj = new Object() obj.name = name obj.getName = function() { console.log(this.name) } return obj} var person1 = createPerson('jack') 缺点:对象无法识别,所有实例都指向同一个原型 构造函数模式 1234567 function Perso

Javascript继承的多种方式和优缺点

本文讲解JavaScript各种继承方式和优缺点. 一.原型链继承 function Parent () { this.name = 'kevin'; } Parent.prototype.getName = function () { console.log(this.name); } function Child () { } Child.prototype = new Parent(); var child1 = new Child(); console.log(child1.getNam

JavaScript中继承的多种方式和优缺点

// 原型链继承 /** * 1. 原型链继承 * 缺点: * 1. 在子类中不能向父类传参 * 2. 父类中所有引用类型的属性会被所有子类实例共享,也就说一个子类实例修改了父类中的某个引用类型的属性时,其他子类实例也会受到影响 */ function Parent() { this.name = "parent"; this.hobby = ["sing", "rap"]; } function Child() { this.type = &q

JavaScript中判断为整数的多种方式

原文:JavaScript中判断为整数的多种方式 之前记录过JavaScript中判断为数字类型的多种方式,这篇看看如何判断为整数类型(Integer). JavaScript中不区分整数和浮点数,所有数字内部都采用64位浮点格式表示.但实际操作中比如数组索引.位操作则是基于32位整数. 方式一.使用取余运算符判断 任何整数都会被1整除,即余数是0.利用这个规则来判断是否是整数. function isInteger(obj) { return obj%1 === 0 } isInteger(3

javascript 中九种创建对象的方式

javascript 中对象的简介: ECMA-262 把对象的定义为:"无序属性的集合,其属性可以包含基本值,对象或者函数."严格来讲,这就相当于说对象是一组没有特定顺序的值.对象的每个属性或方法都有一个名字,而每个名字都映射到一个值.正是因为这样,我们可以把 javascript 中的对象想象成散列表:无非就是一组名值对,其中值可以是数据或函数. javascript 中九种创建对象的方式: 1.原生 Object 构造函数 2.对象字面量表示法 3.工厂模式 4.构造函数模式 5

Android进阶——构建UI布局的多种方式总结

引言 作为Android App,给人第一印象的就是用户界面(UI),简洁友好的UI,自然会给用户优秀的体验,自然很容易就得到用户的认可和赞许,这样App才变得真正的有价值.所以作为开发App的第一步,UI尤为重要,构建UI有很多种方式:xml静态布局.java动态代码.HTML构建(借助WebView)和第三方开源框架等. 一.构成UI的基本元素--View和ViewGroup概述 在Android中绝大部分的UI组件都是存放在android.widget包及其子包.android.view包

Android入门——构建UI布局的多种方式

引言 作为Android App,给人第一印象的就是用户界面(UI),简洁友好的UI,自然会给用户优秀的体验,自然很容易就得到用户的认可和赞许,这样App才变得真正的有价值.所以作为开发App的第一步,UI尤为重要,构建UI有很多种方式:xml静态布局.java动态代码.HTML构建(借助WebView)和第三方开源框架等. 一.构成UI的基本元素--View和ViewGroup概述 在Android中绝大部分的UI组件都是存放在android.widget包及其子包.android.view包