JavaScript创建对象的七种方式,快来GET

1.构造函数创建对象

// 1.{}直接创建对象
var obj1 = {};
obj1.name = 'Xiaoming';
obj1.sayHi = function(){
    console.log('你好');
}

缺点:创建多个对象时会产生大量的重复代码

2.Object构造函数创建对象

// 2.Object构造函数创建对象
var obj2 = new Object();
obj2.name = 'Xiaoming';
obj2.sayHi = function(){
    console.log('你好');
}

缺点:创建多个对象时会产生大量的重复代码

3.对象字面量的方式创建对象

//3.对象字面量的方式创建对象
var obj3 = {
    name:'Xiaoming',
    sayHi:function(){
        console.log('你好');
    }
}

缺点:创建多个对象时会产生大量的重复代码

4.工厂模式创建对象

function factory(){
    var obj4 = {};
    obj4.name = 'Xiaoming';
    obj4.sayHi = function(){
        console.log('你好');
    }
    //出场
    return obj4;
}

缺点:工厂模式创建多个对象时,不同对象的相同方法仍然存在多个,既不环保,又不高效;
工厂模式创建对象时,没办法解决对象类型识别的问题。

5.自定义构造函数

//5.构造函数
function Human(){
    // var this = {}
    this.name = 'Xiaoming';
    this.sayHi = function(){
        console.log('你好');
    }
    // return this;
}

缺点:解决了对象类型识别的问题,但是创建多个对象时,不同对象的相同方法仍然存在多个!

6.原型模式

// 6.原型模式
function Cat(){ };    
Cat.prototype.name ='小白';    
Cat.prototype.color ='white';    
Cat.prototype.food ='fish';    
Cat.prototype.skill = function (){        
    alert('卖萌~喵喵喵~~~');    
};
var cat1 = new Cat();//实例
var cat2 = new Cat();//实例
alert(cat1.skill === cat2.skill);//true    
alert(cat1.name === cat2.name);//true

缺点:原型模式省略了为构造函数传递参数这一环节,结果所有实例都将取得相同的属性值。
prototype中的属性和方法共享,对于函数来说非常适合,但属性共享,问题可能很严重!

7.混合模式

// 7.混合模式(构造函数+原型)
function Person(n,s,a){
    this.name = n;
    this.sex = s;
    this.age = a;
}
Person.prototype.attr = '人类';
Person.prototype.eat = function (){
    alert('什么都吃');
}
var p1 = new Person('老王','男',36);
var p2 = new Person('小宋','女',26);
console.log(p1.constructor);//Person
console.log(p1.eat === p2.eat);//true
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值