JavaScript创建对象

时间：2020-12-03 17:19:31

最佳方式

原型模式与构造模式组合使用

先上代码：

function Person(name,age,salary){

  this.name = name;

  this.age = age;

  this.salary = salary;

  this.people = ["people1","people2"];

}

Person.prototype = {

  constructor:Person,

  sayName:function(){

    console.log(this.name);

  }

}

var p1 = new Person("name1","20","5000");

var p2 = new Person("name2","22","8000");

p1.people.push("people3");

console.log(p1.people);

console.log(p2.people);

运行结果：

Array [ "people1", "people2", "people3" ]

Array [ "people", "people" ]

这是创建对象最常用也是认同度最高的方式，把可共享的方法和属性放在prototype原型对象里面，把实例属性放在构造函数中。

动态原型模式

这种创建对象的模式，只写一个构造函数，而把原型放在构造函数中作为初始化用，这种结构就有点像java创建类一样，也是一种很好的创建对象的模式，我们来看一下：

function Person(name,age,salary){

  this.name = name;

  this.age = age;

  this.salary = salary;

  if(typeof this.sayName != "function"){

    Person.prototype.sayName = function(){

      console.log("Hello, " + this.name);

    }

    Person.prototype.saySalary = function(){

      console.log("My salary is " + this.salary);

    }

  }

}

var p1 = new Person("name1","20","8000");

var p2 = new Person("name2","21","7000");

p1.sayName();

p1.saySalary();

p2.sayName();

p2.saySalary();

运行结果：

Hello, name1

My salary is 8000

Hello, name2

My salary is 7000

这种模式不能用字面量来重写原型。如果你尝试使用下面的代码来编写：

function Person(name,age,salary){

  this.name = name;

  this.age = age;

  this.salary = salary;

  if(typeof this.sayName != "function"){

    Person.prototype = {

      constructor : Person,

      sayName : function(){

        console.log("Hello, " + this.name);

      },

      saySalary : function(){

        console.log("My salary is " + this.salary);

      }

    }

  }

}

var p1 = new Person("name1","20","8000");

var p2 = new Person("name2","21","7000");

p1.sayName();

p1.saySalary();

p2.sayName();

p2.saySalary();

运行结果：

TypeError: p1.sayName is not a function

因为原型的重写是在创建了对象之后进行的，重写后的原型实际上是一个新的原型对象（重新创建一个，原来的还在，它们的constructor都指向Person），而实例的prototype指针还是指向原来的原型对象（里面没有其他属性和方法，因为属性和方法写在新的原型对象上），所以运行的时候，在实例对象中找不到sayName方法，在原型对象中也找不到sayName方法，即sayName未定义，所以在调用p1.sayName()方法时就报错，说sayName不是一个方法。

我们可以看下面的例子来深入理解一下：

function Person(){};

// 在之前创建

var p1 = new Person();

Person.prototype = {

  constructor:Person,

  name:"name1",

  age:"20",

  sayName:function(){

    console.log(this.name);

  }

};

// 在之后创建

var p2 = new Person();

p2.sayName(); //name1

p1.sayName(); //error

常用的方法

我们以下面这段代码为例：

function Person(name,age,salary){

  this.name = name;

  this.age = age;

  this.salary = salary;

  this.people = ["people1","people2"];

}

Person.prototype = {

  constructor:Person,

  publicWork:"Teacher",

  sayName:function(){

    console.log(this.name);

  }

}

var p1 = new Person("name1","20","5000");

var p2 = new Person("name2","22","8000");

删除实例属性 delete

p1.publicWork = "Doctor";

console.log(p1.publicWork);

p1.publicWork = null;

console.log(p1.publicWork);

delete p1.publicWork;

console.log(p1.publicWork);

运行结果：

Doctor

null

Teacher

检测对象类型 instanceof

console.log(p1 instanceof Person); //true

console.log(p2 instanceof Person); //true

判断原型对象与实例之间是否联系 isPrototypeOf()

console.log(Person.prototype.isPrototypeOf(p1)); //true

console.log(Person.prototype.isPrototypeOf(p2)); //true

获得原型对象 Object.getPrototypeOf()

console.log(Object.getPrototypeOf(p1) == Person.prototype); //true

console.log(Object.getPrototypeOf(p2).publicWork); //Teacher

注意：这是 ECMAScript5 的新方法，IE9+、其他主流浏览器支持。

判断属性是否存在于原型对象中

//函数作用：判断属性是否存在于原型对象中

function isInPrototype(obj,param){

  if((param in obj) && !obj.hasOwnProperty(param)){

    return true;

  }else{

    return false;

  }

}

console.log(isInPrototype(p1,"publicWork")); //true

console.log(isInPrototype(p2,"name")); //false
  • hasOwnProperty() 可以检测属性是否在实例中
  • in 可以检测属性是否存在，无论是在实例中还是在原型对象中

通过以上方法的结合，即可判断属性是否存在于原型对象中。

获得可枚举的属性和方法 Object.keys()

先要了解：对于系统内置的属性一般是不可枚举的，如果重新创建覆盖原来的属性，那么就变成可枚举。

console.log(Object.keys(p1));

console.log(Object.keys(Person.prototype));

运行结果：

Array [ "name", "age", "salary", "people" ]

Array [ "constructor", "publicWork", "sayName" ]

其中constructor为覆盖的属性，所以变为可枚举。

参考

  • 《JavaScript高级程序设计》

相关文章