码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2018-03-11 22:33:34      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:java   str   实例   方法   getname   使用   ...   his   this   

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() // 注释掉上面的代码,这句是可以执行的

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

标签:java   str   实例   方法   getname   使用   ...   his   this   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!