JavaScript创建对象

最佳方式

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

先上代码:

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高级程序设计》
posted @ 2016-11-18 13:29  TabWeng  阅读(471)  评论(0编辑  收藏  举报