js 创建对象的几种方式总结

第一种 构造函数创建

    var Person = new Object();
    Person.name = 'nike';
    Person.age  = 29;
    console.log(Person)

这串代码创建了Object 引用类型的一个新实例,然后把实例保存在Person 变量中。

第二种 使用对象字面量表示法

    var Person = {
        name: 'nike',
        age: 29
    }
    console.log(Person)

对象字面量是,定义对象的一种简写形式,目的在于简化创建大量属性的对象的过程,也就是说第一种创建对象的方法和第二种创建对象的方法都是一样的,只是写法上的不同;
在介绍第三种创建方法之前,我们要先明白为什么还要用别的方法来创建对象,也就是第一种和第二种方法的缺点所在。他们都是用了同一个接口创建了很对对象,会产生大量的重复代码,如果我们要创建100个对象,就要输入100次很多相同的代码。所以我们可以吧创建函数的过程封装在函数中,通过调用函数来生成对象

第三种 使用工厂模式来创建对象

    function creatPerson(name, age, job) {
        var o = new Object();
        o.name = name;
        o.age  = age;
        o.sayName = function(){
            console.log(this.name)
        }
        return o;
    }

    var person1 = creatPerson('nike', 29, 'teacher');
    var person2 = creatPerson('arvin', 20 , 'student');
    
    console.log(person1);
    console.log(person2);

在使用工厂模式创建对象的时候,我们可以注意到,在creatPerson 函数中返回的是一个对象,但是我们无法判断返回的对象究竟是一个什么类型,于是就出现了第四种创建对象的模式。

第四种 使用构造函数创建对象

    function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function(){
            console.log(this.name)
        }
    }

    var person1 = new Person('nike', 29, 'teacher');
    var person2 = new Person('arvin', 20, 'student');

    console.log(person1);
    console.log(person2);

对比工厂模式,我们可以发现
1,没有显示的创建对象。
2,直接将属性和方法赋值给了this对象。
3,没有return 语句。
4,可以识别对象的类型了,对于检测对象的类型,这里我们使用 instanceof 操作符,我们来进行自主检测

	console.log(person1 instanceof Object);//ture
	console.log(person1 instanceof Person);//ture
	console.log(person2 instanceof Object);//ture
	console.log(person2 instanceof Person);//ture

同时我们也应该明白,按照惯例,构造函数始终应该要用一个大写字母开头,而非构造函数应该以一个小写字母开头。

虽然构造函数很好用,但是还是有缺点的。
就是每个方法都要在每个实例上重新创建一遍,方法指的就是我们在对象里边定义的函数,如果方法的数量很多,就会占用很多不必要的内存,于是出现了第五种创建对象的方法。

第五种 原型创建对象模式

    function Person(){}
    Person.prototype.name = 'nike';
    Person.prototype.age  = 20;
    Person.prototype.job  = 'teacher';
    Person.prototype.sayName = function(){
        console.log(this.name);
    }
    var person1 = new Person();
    person1.sayName();

使用原型创建对象的方式,可以让所有对象实例共享它所包含的属性和方法。
如果是使用原型创建对象模式,请看下边代码。

    function Person(){};
    Person.prototype.name = 'nike';
    Person.prototype.age  = 20;
    Person.prototype.job  = 'teacher';
    Person.prototype.sayName = function(){
        console.log(this.name);
    }

    var person1 = new Person();
    var person2 = new Person();
    person1.name = 'greg';
    console.log(person1.name); //greg  --来自实例
    console.log(person2.name); //nike  --来自原型

当为对象实例添加一个属性时,这个属性就会屏蔽掉原型对象中保存的同名属性。
这时候我们就可以通过使用构造函数模式,和原型模式结合的方式,构造函数用于定义实例属性,而原型模式用于定义方法和共享的属性
第六种 组合使用构造函数模式和原型模式

    function Person(name, age, job) {
        this.name = name;
        this.age  = age;
        this.job  = job;
    }
    Person.prototype = {
        constructor: Person,
        sayName: function(){
            console.log(this.name);
        }
    }

    var person1 = new Person('nike', 20, 'teacher');
    person1.sayName()
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值