JavaScript高级程序设计创建对象方法总结

dreambei 发布于2019-08-26 10:41 / 2086人阅读

摘要：缺点无法通过识别对象，以为都是来自，无法得知来自每次通过创建对象的时候，所有的方法都是一样的，但是却存储了多次，浪费资源。所有的方法都是共享的，没有办法创建实例自己的属性和方法，也没有办法像构造函数那样传递参数。

工厂模式

function Person() {
  var o = new Object();
  o.name = "hanmeimei";
  o.say = function() {
    alert(this.name);
  }
  return o;
}
var person1 = Person();

优点：

简单易懂。

缺点：

无法通过constructor识别对象，以为都是来自Object，无法得知来自Person

每次通过Person创建对象的时候，所有的say方法都是一样的，但是却存储了多次，浪费资源。

构造函数模式

function Person() {
  this.name = "hanmeimei";
  this.say = function() {
    alert(this.name)
  }
}
var person1 = new Person();

优点：

通过constructor或者instanceof可以识别对象实例的类别

可以通过new 关键字来创建对象实例，更像OO语言中创建对象实例

缺点：

多个实例的say方法都是实现一样的效果，但是却存储了很多次（两个对象实例的say方法是不同的，因为存放的地址不同）

注意：

构造函数模式隐试的在最后返回return this 所以在缺少new的情况下，会将属性和方法添加给全局对象，浏览器端就会添给window对象。

也可以根据return this 的特性调用call或者apply指定this。这一点在后面的继承有很大帮助。

原型模式

function Person() {}
Person.prototype.name = "hanmeimei";
Person.prototype.say = function() {
  alert(this.name);
}
Person.prototype.friends = ["lilei"];
var person1 = new Person();

优点：

say方法是共享的了，所有的实例的say方法都指向同一个。

可以动态的添加原型对象的方法和属性，并直接反映在对象实例上。

var person1 = new Person()
Person.prototype.showFriends = function() {
  console.log(this.friends)
}
person1.showFriends()  //["lilei"]

缺点：

1.出现引用的情况下会出现问题具体见下面代码：

var person1 = new Person();
var person2 = new Person();
person1.friends.push("xiaoming");
console.log(person2.friends)  //["lilei", "xiaoming"]

因为js对引用类型的赋值都是将地址存储在变量中，所以person1和person2的friends属性指向的是同一块存储区域。

2.第一次调用say方法或者name属性的时候会搜索两次，第一次是在实例上寻找say方法，没有找到就去原型对象(Person.prototype)上找say方法，找到后就会在实力上添加这些方法or属性。
3.所有的方法都是共享的，没有办法创建实例自己的属性和方法，也没有办法像构造函数那样传递参数。

注意：

优点②中存在一个问题就是直接通过对象字面量给Person.prototype进行赋值的时候会导致constructor改变，所以需要手动设置，其次就是通过对象字面量给Person.prototype进行赋值，会无法作用在之前创建的对象实例上

    var person1 = new Person()
    Person.prototype = {
        name: "hanmeimei2",
          setName: function(name){
          this.name = name
          }
    }
    person1.setName()   //Uncaught TypeError: person1.set is not a function(…)

这是因为对象实例和对象原型直接是通过一个指针链接的，这个指针是一个内部属性[[Prototype]]，可以通过__proto__访问。我们通过对象字面量修改了Person.prototype指向的地址，然而对象实例的__proto__，并没有跟着一起更新，所以这就导致，实例还访问着原来的Person.prototype，所以建议不要通过这种方式去改变Person.prototype属性

动态原型模式

function Person(name) {
  this.name = name
  if(typeof this.say != "function") {
    Person.prototype.say = function(
    alert(this.name)
  }
}
var friend = new Person("jjc")
friend.say()

构造函数和原型组合模式

function Person(name) {
  this.name = name
  this.friends = ["lilei"]
}
Person.prototype.say = function() {
  console.log(this.name)
}
var person1 = new Person("hanmeimei")
person1.say() //hanmeimei

优点：

解决了原型模式对于引用对象的缺点

解决了原型模式没有办法传递参数的缺点

解决了构造函数模式不能共享方法的缺点

缺点：

没写到一起，封装性不强

寄生构造函数模式

function Person(name) {
  var o = new Object()
  o.name = name
  o.say = function() {
    alert(this.name)
  }
  return o
}
var peron1 = new Person("hanmeimei")

稳妥构造模式

function Person(name) {
  var o = new Object()
  o.say = function() {
    alert(name)
  }
}
var person1 = new Person("hanmeimei");
person1.name  // undefined
person1.say() //hanmeimei

优点：

安全，那么好像成为了私有变量，只能通过say方法去访问

GPU云服务器云服务器高级javascript程序设计 javascript高级程序设计 javascript高级程序 javascript对象方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106607.html

JavaScript高级程序设计——原型和原型链

摘要：但是确是一个特例它的指向的是至于为什么简单解释下所有的构造器都来自于，甚至包括根构造器及自身。所有构造器都继承了的属性及方法。如知道了所有构造器含内置及自定义的都是，的是谁呢这说明所有的构造器也都是一个普通对象，可以给构造器添加删除属性等。 showImg(https://segmentfault.com/img/remote/1460000009446154); 前言此文章为加深对...

My_Oh_My 2019-08-20 16:37 评论0 收藏0
《javascript高级程序设计》笔记：内存与执行环境

摘要：因此，所有在方法中定义的变量都是放在栈内存中的当我们在程序中创建一个对象时，这个对象将被保存到运行时数据区中，以便反复利用因为对象的创建成本通常较大，这个运行时数据区就是堆内存。上一篇：《javascript高级程序设计》笔记：继承近几篇博客都会围绕着图中的知识点展开 showImg(https://segmentfault.com/img/bVY0C4?w=1330&h=618);...

fuyi501 2019-08-21 17:44 评论0 收藏0
JavaScript高级程序设计学习笔记三（基本语法)

摘要：数据类型中有种简单数据类型也称为基本数据类型和。在中非空字符串，非零数字，任意对象，都被认为。而空字符串，和，，认为是。用于表示整数和浮点数。标识符由数字字母下划线美元符组成，但首字母不能是数字。变量方法对象命名推荐驼峰法。 JavaScript语法一.语法简介因为JavaScript语法和Java等语法非常类似。所以只是简单介绍一下。大小写 JavaScript是大小写敏感的语...

Mike617 2019-08-22 11:20 评论0 收藏0
如何阅读《JavaScript高级程序设计》（一）

摘要：题外话最近在看高级程序设计这本书，面对着多页的厚书籍，心里有点压力，所以我决定梳理一下。。全局环境的关闭是页面关闭或者浏览器关闭，而局部环境的关闭是指函数结束。数值范围最大和最小的范围是超出范围的数字如何表示是一个特殊的值。题外话最近在看《JavaScript高级程序设计》这本书，面对着700多页的厚书籍，心里有点压力，所以我决定梳理一下。。探究一下到底怎么读这本书。本书的内容好像...

chadLi 2019-08-01 18:19 评论0 收藏0
如何阅读《JavaScript高级程序设计》（一）

摘要：题外话最近在看高级程序设计这本书，面对着多页的厚书籍，心里有点压力，所以我决定梳理一下。。全局环境的关闭是页面关闭或者浏览器关闭，而局部环境的关闭是指函数结束。数值范围最大和最小的范围是超出范围的数字如何表示是一个特殊的值。题外话最近在看《JavaScript高级程序设计》这本书，面对着700多页的厚书籍，心里有点压力，所以我决定梳理一下。。探究一下到底怎么读这本书。本书的内容好像...

jubincn 2019-08-29 14:08 评论0 收藏0