javascript创建对象的3种方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript创建对象的3种方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2398字，纯文字阅读大概需要4分钟。

内容图文

第一种创建对象的方式：

创建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创建对象的3种方法全部内容，希望文章能够帮你解决javascript创建对象的3种方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端