【JS基础】--对象创建

149 阅读3分钟

一、new 操作符后跟 Object 构造函数

var obj = new Object()

二、对象字面量

var obj ={
    name:'owen',
    age:'24',
    todo:function(){
        //code
    }
}
  • 对象字面量是对象定义的一种简写形式,目的在于简化创建包含大量属性的对象的过程。也就是说,第一种和第二种方式创建对象的方法其实都是一样的,只是写法上的区别不同

以上两种方法的缺点:

使用同一个接口创建很多对象,会产生大量的重复代码。

三、工厂方法

为了避免该情况,我们把创建对象的过程封装在函数体内,通过函数的调用直接生成对象(工厂模式)。

因为ECMAScript无法创建类,所以就用函数来封装以特定接口对象的细节。

//本质就是在函数内通过new关键字创建对象,并将传入的值赋值给对象,最后通过函数将对象return出来
    function createPerson(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.todo =function (){
           console.log('todo...')
        };
        return obj;
    }
    
    //调用函数创建对象
    var person1 = createPerson('jiangwen,18');
    var person2 = createPerson('owen,24');

四、构造函数

    function  Person (name,age){
        this.name =name;
        this.age = age;
        this.todo = function(){
            //code
        }
    }
    
    //通过new实例化构造函数创建对象
     var jw = new Person('jiangwen',18);

对比工厂模式,我们可以发现以下区别:

  • 1.没有显示地创建对象new Object()

  • 2.直接将属性和方法赋给了this对象this.name

  • 3.没有return语句

  • 4.可以识别的对象的类型。对于检测对象类型,我们应该使用instanceof操作符,我们来进行自主检测

    alert(jw instanceof Object);//ture
    alert(jw instanceof Person);//ture

可以通过下列任何一种方式来调用:

// 当作构造函数使用
var person = new Person("jiangwen", 29);
person.sayName(); //"Nicholas"

// 作为普通函数调用
Person("Greg", 27); // 添加到 window
window.sayName(); //"Greg"

// 在另一个对象的作用域中调用
var o = new Object();
Person.call(o, "Kristen", 25);
o.sayName(); //"Kristen"

==函数的两种写法==

函数声明(可在函数未声明前调用)

function add(){}

函数表达式(需要在表达式之后调用)

var add = function(){}

构造函数它也有它的缺点:

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

五、原型创建对象模式

    function Person(){};
    Person.prototype.name = 'owen';
    Person.prototype.age = 22';
    Person.prototype.age.sayName = function(){
        alert(this.name)
    }
    var jw1 = new Person();
    var jw2 = new Person();
    jw2.name = 'jiangwen';
    alert(jw1.name);//'owen'--来自原型
    alert(jw2.name);//'jiangwen'--来自实例

当为对象实例添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性。

六、组合使用构造函数模式和原型模式

使用构造函数模式与原型模式结合的方式,构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性

    function Person(name,age,job){
        this.name =name;
        this.age = age;
        this.job = job;
    }
    Person.prototype={
        constructor:Person,
        sayName:function(){
            alert(this.name);
        }
    }
    
    var person1 = new Person('Nike',20,'teacher')