视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
javascript创建对象的3种方法
2020-11-27 20:28:43 责编:小OO
文档


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

下载本文
显示全文
专题