javascript创建对象的3种方法

 更新时间:2016年11月02日 09:57:46   作者:tclyjy  
这篇文章主要介绍了javascript创建对象的3种方法,对比分析js创建对象三种方式的优缺点,感兴趣的小伙伴们可以参考一下

本文为大家分享了js创建对象的多种方法,分享个方法的优劣,具体内容如下

第一种创建对象的方式:

创建JSON对象
推荐使用的场合: 作为函数的参数,临时只用一次的场景。比如设置函数原型对象。

 var object = {
  name: "Eric",
  age: 24,
  sayHi: function(){
   console.log("My name is "+ this.name + " this year is " + this.age + "years old.")
  }
 };

第二种创建对象的方式:

创建一个Object对象

 var object = new Object();
 object.name = "Eric";
 object.age = 24;
 object.sayHi = function(){....};

以上两种创建对象方式的缺点:不能作为对象创建的模板,也就是不能用new进行构造新对象。

第三种创建对象的方式:

 function Person() {
  this.name = "Eric";
  this.age = 24;
  this.sayHi = function(){
   console.log(this.name);
  }
 }

 var object1 = new Person();
 var object2 = new Person();

这种创建对象方式解决了前两种方式的缺点,可以作为对象创建的模板,可以一直复用创建出多个对象。

new运算符的作用:

执行构造函数(new后面的那个函数),在构造函数内部创建一个空对象
把上一部创建的空对象跟构造函数的原型对象进行关联
然后把this指向当前空对象
在构造函数执行结束后,如果没有return,把空对象返回给object

new运算符原理

第三种方式有个缺点: 对象的内部的函数会在每个对象中都存一份如果创建的对象非常多的话,那么非常浪费内存。函数的行为是所有对象可以共有,不需要每个对象都保存一份。所以,可以把函数放到原型中进行声明,那么所有对象都有了公共的函数,而且内存中只保留一份。所有的属性写到对象的内部

第三种方式beta1:

 function Person() {
  this.name = 'Eric';
  this.age = 24;
 }
 Person.prototype = {
  sayHi: function() {
  },
 };

 var object1 = new Person();
 var object2 = new Person();

继续升级 beta2 :

 function Person(name,age) {
  this.name = name || "";
  this.age = age || "";
 }
 Person.prototype = {
  sayHi: function() {
  },
 };

 var object1 = new Person(name1,age1);
 var object2 = new Person(name2,age2);

问题:1、调用者如果传递参数的顺序发生变化,那么废了
问题:2、参数增减都会导致函数声明变化,调用的地方也可能发生变化。

如何解决:继续升级 beta3 :

 function Person(option) { //用一个对象把所有参数覆盖
  this.name = option.name || "";
  this.age = option.age || "";
 }
 Person.prototype = {
  sayHi: function() {
  },
 };

 var object1 = new Person({
   name: "Eric",
   age: 24
  });
 var object2 = new Person({
   name: "XXX",
   age: xx
  });

继续优化,把初始化的代码 放到init函数中

继续升级 beta4 :

 function Person(option) {
  this._init(option);
 }
 Person.prototype = {
  _init: function (option){
   this.name = option.name;
   this.age = option.age;
  },
  sayHi: function(){
   console.log("HI");
  }
 };

 var object1 = new Person({
   name: "Eric";
   age: 24
  });
 object1.sayHi();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 浅析JavaScript 函数柯里化

    浅析JavaScript 函数柯里化

    这篇文章主要介绍了JavaScript 函数柯里化的相关资料,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-09-09
  • 别了 JavaScript中的isXX系列

    别了 JavaScript中的isXX系列

    我们很容易被漂亮的代码吸引,也不知不觉的在自己的代码库中加入这些。却没有冷静的想过它们的优劣。这不,我就收集了一系列形如 是否为……? 的判断的boolean函数
    2012-08-08
  • JavaScript删除数组元素的方法指南

    JavaScript删除数组元素的方法指南

    作为一名前端开发工程师,我们经常需要在 JavaScript 中操作数组,其中比较常见的操作便是对数组进行元素的添加、删除和修改。在这篇文章中,我会详细介绍JS中所有删除数组元素的方法,希望对大家有所帮助
    2023-05-05
  • JavaScript获取系统自带的颜色选择器功能(图)

    JavaScript获取系统自带的颜色选择器功能(图)

    JavaScript获取系统自带的颜色选择器功能,这个是针对IE浏览器,所以大家如果想用兼容性更好的代码,可以查看脚本之家的相关文章。
    2010-08-08
  • OpenCV.js实现乔丹动图素描效果图文教程

    OpenCV.js实现乔丹动图素描效果图文教程

    这篇文章主要为大家介绍了OpenCV.js实现乔丹动图素描效果的图文教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • JavaScript 参数中的数组展开 [译]

    JavaScript 参数中的数组展开 [译]

    有些时候,我们需要把一个数组展开成多个元素,然后把这些元素作为函数调用的参数.JavaScript中可以使用Function.prototype.apply来实现这种展开操作,但它不能被应用在执行构造函数的情况下.本文解释了什么是展开操作以及如何在使用new运算符的同时进行展开操作
    2012-09-09
  • 基于insertBefore制作简单的循环插空效果

    基于insertBefore制作简单的循环插空效果

    这是一个基于insertBefore制作简单的循环插空效果,实现的数字下面循环插空效果,给需要的朋友分享。
    2015-09-09
  • js跨域和ajax 跨域问题的实现思路

    js跨域和ajax 跨域问题的实现思路

    大家都知道js是不能跨域的,但我们有时候就要这么用,怎么办呢?办法总是有的.
    2009-09-09
  • JavaScript实现猜数字游戏

    JavaScript实现猜数字游戏

    这篇文章主要为大家详细介绍了JavaScript实现猜数字游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • 微信小程序使用Socket的实例

    微信小程序使用Socket的实例

    这篇文章主要介绍了微信小程序使用Socket的实例的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-09-09

最新评论