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

  ECMA把对象定义为:无序属性的集合,其属性可以包含基本值、对象或者函数。

1. 使用Object构造函数创建对象

  创建自定义对象的最简单的方式就是创建一个Object的实例,然后再为它添加属性和方法。

//通过Object构造函数的实例创建对象
var person = new Object();
//添加属性和方法
person.name = "guo";
person.age = ‘24‘;
person.sayName = function(){
    console.log(this.name);
};
//访问属性的两种方式:点表示法和方括号表示法
console.log(person.name);  //"guo"
console.log(person[‘age‘]); //24
person.sayName();  //"guo"

2. 使用对象字面量创建一个对象

//使用对象字面量创建一个对象
var person = {
    name : "guo",
    age : 24,
    sayName : function(){
        console.log(this.name);
    }
};
console.log(person.name);  //"guo"
console.log(person[‘age‘]); //24
person.sayName();  //"guo"

3.工厂模式 

  虽然Object构造函数或者对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建对象,会产生大量的重复代码。为了解决这个问题,提出工厂模式。

//使用工厂模式创建对象,返回带有属性和方法的person对象
function createPerson(name, age){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.sayName = function(){
        console.log(this.name);
    };
    return o;
}
var person1 = createPerson("guo", 24);
person1.sayName(); //"guo"

4.使用自定义构造函数模式创建对象

// 使用自定义构造函数模式创建对象(作为构造函数的函数首字母要大写,以区别其它函数)
function Person(name,age){
    this.name=name;
    this.age=age;
    this.sayName=function(){
        console.log(this.name);
    };
}

var person1 = new Person("guo", 24);
person1.sayName(); //"guo”

拓展:要创建Person的新实例,必须使用new操作符。那么,new操作符具体干了些什么呢?

(1)创建一个新(空)对象

(2)将构造函数的作用域赋给新对象(因为this就指向了这个新对象)

(3)执行构造函数中的代码(为这个新对象添加属性)

(4)返回新对象

构造函数和其他函数的唯一区别:就在于调用它们的方式不同。任何函数,只要通过new操作符来调用,那它就可以作为构造函数;而任何函数,如果不通过new操作符来调用,那它跟普通函数也不会有什么区别。这种方式有个缺陷是,上面例子中,sayName这个方法,它的每个实例都是指向不同的函数实例,而不是同一个。即不同实例上的同门函数是不相等的

  为了解决这个问题,提出了原型模式创建对象。

5.使用原型模式创建对象

//使用原型模式创建对象(解决了构造函数中的函数无法复用问题)
function Person(){
}

Person.prototype = {  //对象字面量语法 重写原型对象
    constructor : Person,
    name : "guo",
    age : 24,
    friends:["liu","li"],
    sayName:function(){
        console.log(this.name);
    }
};
//创建实例1
var person1 = new Person();
person1.friends.push("yang"); 
console.log(person1.friends);  //[ ‘liu‘, ‘li‘, ‘yang‘ ]
//创建实例2
var person2 = new Person();
console.log(person2.friends);  //[ ‘liu‘, ‘li‘, ‘yang‘ ]  //原型模式的缺陷

person1.sayName(); //"guo"
person2.sayName(); //"guo"

  这里我们发现了一个问题,而是原型模式的缺陷,上面例子中,person1改变数组的值,直接影响了person2中friends数组的值,这是我们不希望看到的。

  原型模式最大的问题是由共享的本质所导致的,原型中所有的属性是被所有实例共享的。对于引用类型的值,也出现了实例共享问题。

  为了解决这个问题,提出了组合使用原型模式和构造函数创建对象。

6.组合使用构造函数和原型模式创建对象

  顾名思义,构造函数用于定义实例属性,而原型模式用于定义方法和共享的属性。

//组合使用原型模式和构造函数创建对象(使用最广泛、认同度最高)
//构造函数用于定义实例属性,而原型模式用于定义方法和共享的属性
function Person(name,age){
    this.name = name;
    this.age = age;
  this.friends = ["liu","li"];
}
Person.prototype = {
    constructor : Person,
    sayName : function(){
        console.log(this.name);
    }
}
var person1 = new Person("guo", 24);
var person2 = new Person("zhu", 30);
person1.friends.push("yang");

console.log(person1.friends);  //[ ‘liu‘, ‘li‘, ‘yang‘ ]
console.log(person2.friends);  //[ ‘liu‘, ‘li‘ ]
person1.sayName();//"guo"
person2.sayName();//"zhu"

7.动态原型模式

//动态原型模式(具有更好的封装性)
function Person(name, age){
    //属性
    this.name = name;
    this.age = age;
    this.friends = ["liu","li"];
    //方法
    if(typeof this.sayName !="function"){
        Person.prototype.sayName=function(){
            console.log(this.name);
        };
    }
}

var person1 = new Person("guo", 24);
console.log(person1.friends);  //[ ‘liu‘, ‘li‘ ]
person1.sayName(); //"guo"

  另外还有两个创建对象的方法,寄生构造函数模式稳妥构造函数模式。由于这两个函数不是特别常用,这里就不给出具体代码了。有兴趣可以查看 js高程P160-162

总结

  ECMAScript 支持面向对象(OO)编程,但不使用类或者接口。对象可以在代码执行过程中创建和增强,因此具有动态性而非严格定义的实体。在没有类的情况下,可以采用下列模式创建对象。

(1)工厂模式,使用简单的函数创建对象,为对象添加属性和方法,然后返回对象。这个模式后来被构造函数模式所取代。

(2)构造函数模式,可以创建自定义引用类型,可以像创建内置对象实例一样使用new 操作符。不过,构造函数模式也有缺点,即它的每个成员都无法得到复用,包括函数。由于函数可以不局限于任何对象(即与对象具有松散耦合的特点),因此没有理由不在多个对象间共享函数。

(3)原型模式,使用构造函数的prototype 属性来指定那些应该共享的属性和方法。组合使用构造函数模式和原型模式时,使用构造函数定义实例属性,而使用原型定义共享的属性和方法。

时间: 2024-10-08 17:35:54

JavaScript创建对象的几种方式总结的相关文章

JavaScript 创建对象的七种方式

转自:xxxgitone.github.io/2017/06/10/JavaScript创建对象的七种方式/ JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产.接下来介绍七种非常经典的创建对象的方式,他们也各有优缺点. 工厂模式 1 function createPerson(name, job) { 2 var o = new Object() 3 o.name = name 4 o.job

补充:JavaScript 创建对象的七种方式

JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产.接下来介绍七种非常经典的创建对象的方式,他们也各有优缺点. 工厂模式 1 function createPerson(name, job) { 2 var o = new Object() 3 o.name = name 4 o.job = job 5 o.sayName = function() { 6 console.log(this.na

0145 JavaScript创建对象的三种方式 之 字面量:创建,访问对象的属性&方法,变量、属性、函数、方法总结

在 JavaScript 中,现阶段我们可以采用三种方式创建对象(object): 利用字面量创建对象 利用 new Object 创建对象 利用构造函数创建对象 5.2.1 利用字面量创建对象 5.2.1.1 创建 使用对象字面量创建对象:{ }. 就是花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法: { } 里面采取键值对的形式表示 键:相当于属性名 值:相当于属性值,可以是任意类型的值(数字类型.字符串类型.布尔类型,函数类型等) 代码如下: var star = { na

javascript创建对象的几种方式

1. 简单对象的创建    使用{} 也就是js的单例模式    var Cat = {};//JSON格式 Cat.name="kity";//添加属性并赋值 Cat.age=2; Cat.sayHello=function(){ console.log("hello "+Cat.name+",今年"+Cat["age"]+"岁了");//可以使用“.”的方式访问属性,也可以使用HashMap的方式访问

javascript 创建对象的几种方式

1.通过new Object创建 创建自定义对象的最简单方式就是创建一个Object 的实例,然后再为它添加属性和方法,如下所示. var person = new Object(); person.name = "Nicholas"; person.age = 29; person.job = "Software Engineer"; person.sayName = function(){ alert(this.name); }; 2.通过对象字面量创建对象 v

0146 JavaScript创建对象的三种方式 之 new Object

创建空对象 var andy = new Obect(); 通过内置构造函数Object创建对象,此时andy变量已经保存了创建出来的空对象 给空对象添加属性和方法 通过对象操作属性和方法的方式,来为对象增加属性和方法 示例代码如下: andy.name = '啊哈'; andy.age = 18; andy.sex = '男'; andy.sayHi = function(){ alert('大家好啊~'); } 注意: Object() :第一个字母大写 new Object() :需要 n

0147 JavaScript创建对象的三种方式 之 构造函数

5.2.3.1 构造函数 构造函数:是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 运算符一起使用.我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面. 构造函数的封装格式: function 构造函数名(形参1,形参2,形参3) { this.属性名1 = 参数1; this.属性名2 = 参数2; this.属性名3 = 参数3; this.方法名 = 函数体; } 构造函数的调用格式 var obj = new 构造函数名(实参1,实参2,

javascript创建对象的6种方式

/*1.工厂模式*/ function createPerson(name,age,job) { var o = new object(); o.name = name; o.age = age; o.job = job; o.setName = function(newName) { this.name = newName; }; return o; } var person1 = createPerson("zcj", 21, "Soft Engineer");

OOP 创建对象的7种方式

JavaScript OOP 创建对象的7种方式 我写JS代码,可以说一直都是面向过程的写法,除了一些用来封装数据的对象或者jQuery插件,可以说对原生对象了解的是少之又少.所以我拿着<JavaScript高级程序设计 第3版>恶补了一下,这里坐下总结笔记,属于菜鸟级别,大神请直接无视. 1.工厂模式 1 /** 2 * 工厂模式 3 */ 4 function createPerson(name,age,job){ 5 var o = new Object(); 6 o.name = na