javascript创建对象的3种方法-js教程-PHP中文网

javascript创建对象的3种方法

高洛峰

发布： 2016-12-08 10:45:49

原创

1359人浏览过

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

第一种创建对象的方式：

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

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

登录后复制

立即学习“Java免费学习笔记（深入）”；

第二种创建对象的方式：

创建一个Object对象

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

登录后复制

立即学习“Java免费学习笔记（深入）”；

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

第三种创建对象的方式：

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

登录后复制

立即学习“Java免费学习笔记（深入）”；

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

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();

登录后复制

立即学习“Java免费学习笔记（深入）”；

继续升级 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);

登录后复制

立即学习“Java免费学习笔记（深入）”；

问题：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
 });

登录后复制

立即学习“Java免费学习笔记（深入）”；

继续优化，把初始化的代码放到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();

登录后复制

立即学习“Java免费学习笔记（深入）”；