javascript创建对象的3种方法

所属分类: 网络编程 / JavaScript 阅读数: 744
收藏 0 赞 0 分享

本文为大家分享了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();

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

更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多