在Js中創(chuàng)建對象的幾種方式

willin 發(fā)布于2019-08-21 11:43 / 3522人閱讀

摘要：對象字面量的方式今年創(chuàng)建實例的發(fā)明者我是今年屬性是可以動態(tài)添加，修改的構(gòu)造函數(shù)無參構(gòu)造函數(shù)有參構(gòu)造函數(shù)我叫，今年歲實例化創(chuàng)建對象調(diào)用方法由于指針在對象實例的時候發(fā)生改變指向新的實例。是我的名字混合方式構(gòu)造函數(shù)原型我是，今年

javascript創(chuàng)建對象簡單的說,無非就是使用內(nèi)置對象或各種自定義對象，當(dāng)然還可以用JSON；方法很多，也能混合使用。

對象字面量的方式：

var person={
    name:"SF",
    age:25
    say:function(){
       alert(this.name+"今年"+this.age);
    }
};
person.say();

創(chuàng)建Object實例：

var my = new Object();
my.name = "SF"; //JavaScript的發(fā)明者
my.age = 25;
my.say = function() { 
  alert("我是"+this.name+"今年"+my.age);
}
my.say();

*屬性是可以動態(tài)添加，修改的

構(gòu)造函數(shù)

無參構(gòu)造函數(shù)

function Person(){}
var person = new Person(); 
person.name = "SF";
person.age = "25";
person.say = function() {
   alert("My name is " + person.name);
}
person.say();

有參構(gòu)造函數(shù)

function Person(name,age) { 
  this.name = name; 
  this.age = age; 
  this.say = function() { 
      alert("我叫" + this.name + "，今年" + this.age + "歲); 
  }
}
var my = new Person("SF",25); //實例化、創(chuàng)建對象
my.say(); //調(diào)用say()方法

由于this指針在對象實例的時候發(fā)生改變指向新的實例。這時新實例的方法也要重新創(chuàng)建，如果n個實例就要n次重建相同的方法。

工廠模式

function creatPerson(name,age){
   var person = new Object();
   person.name=name;
   person.age=age;
   person.say=function(){
   alert(this.name+"今年"+this.age+"歲");
  };
  return person;
 };
 var my = creatPerson("SF",25);//實例化
 my.say();//調(diào)用

原型方式

function Person(name,age){}
Person.prototype.name = "SF";
Person.prototype.age = 25;
Person.prototype.say = function() { 
  alert(this.name+"是我的名字");
}
var my = new Person();
my.say();

讓我們先了解下原型：

首先，每個函數(shù)都有一個prototype(原型)屬性，這個指針指向的就是Person.prototype對象。而這個原型對象在默認的時候有一個屬性constructor，指向Person，這個屬性可讀可寫。而當(dāng)我們在實例化一個對象的時候，實例my除了具有構(gòu)造函數(shù)定義的屬性和方法外（注意，只是構(gòu)造函數(shù)中的）,還有一個指向構(gòu)造函數(shù)的原型的指針，ECMAScript中叫[[prototype]]，這樣實例化對象的時候，原型對象的方法并沒有在某個具體的實例中，因為原型沒有被實例。所以這種模式定義的對象，在調(diào)用方法的時候過程：調(diào)用my.say();先看實例中有沒有，有調(diào)之，無追蹤到原型，有調(diào)之，無出錯，調(diào)用失敗。


  
上面代碼等同

function Person(name,age){}
Person.prototype={
    constructor:Person,   //必須手動設(shè)置這個屬性，否則沒有實例共享原型的意義了。
    name:"SF",
    age:25,
    say:function(){
        alert(this.name+"是我的名字");
    }
}
var my = new Person();
my.say();

混合方式（構(gòu)造函數(shù)+原型）

function Person(name,age) {
   this.name = name;
   this.age = age;
}
Person.prototype.say = function() { 
  alert("我是"+this.name+"，今年"+this.age);
}
var my = new Person("SF","25");
my.say();