使用JavaScript怎么在面向對象中創建對象

這篇文章主要為大家詳細介紹了使用JavaScript怎么在面向對象中創建對象，文中示例代碼介紹的非常詳細，具有一定的參考價值，發現的小伙伴們可以參考一下：

JavaScript可以做什么

1.可以使網頁具有交互性，例如響應用戶點擊，給用戶提供更好的體驗。 2.可以處理表單，檢驗用戶的輸入，并提供及時反饋節省用戶時間。 3.可以根據用戶的操作，動態的創建頁面。 4使用JavaScript可以通過設置cookie存儲在瀏覽器上的一些臨時信息。

創建對象的幾種常用方式

1.使用Object或對象字面量創建對象

2.工廠模式創建對象

3.構造函數模式創建對象

4.原型模式創建對象

1.使用Object或對象字面量創建對象

使用object

var student = new Object();
student.name = "easy";
student.age = "20";

使用字面量

var sutdent = {
 name : "easy",
 age : 20
};

2.工廠模式創建對象

function createStudent(name, age) {
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 return obj;
}
var student1 = createStudent("easy1", 20);
var student2 = createStudent("easy2", 20);
...
var studentn = createStudent("easyn", 20);

3.構造函數模式創建對象

在上面創建Object這樣的原生對象的時候，我們就使用過其構造函數

var obj = new Object();

在創建原生數組Array類型對象時也使用過其構造函數：

var arr = new Array(10); //構造一個初始長度為10的數組對象

我們首先了解一下構造函數和普通函數有什么區別。

1、實際上并不存在創建構造函數的特殊語法，其與普通函數唯一的區別在于調用方法。對于任意函數，使用new操作符調用，那么它就是構造函數；不使用new操作符調用，那么它就是普通函數。

2、按照慣例，我們約定構造函數名以大寫字母開頭，普通函數以小寫字母開頭，這樣有利于顯性區分二者。例如上面的new Array()，new Object()。

3、使用new操作符調用構造函數時，會經歷(1)創建一個新對象；(2)將構造函數作用域賦給新對象（使this指向該新對象）；(3)執行構造函數代碼；(4)返回新對象；4個階段。

ok，了解了構造函數和普通函數的區別之后，我們使用構造函數將工廠模式的函數重寫，并添加一個方法屬性：

function Student(name, age) {
 this.name = name;
 this.age = age;
 this.alertName = function(){
  alert(this.name)
 };
}
function Fruit(name, color) {
 this.name = name;
 this.color = color;
 this.alertName = function(){
  alert(this.name)
 };
}

這樣我們再分別創建Student和Fruit的對象

var v1 = new Student("easy", 20);
var v2 = new Fruit("apple", "green");

這時我們再來用instanceof操作符來檢測以上對象類型就可以區分出Student以及Fruit了：

alert(v1 instanceof Student); //true
alert(v2 instanceof Student); //false
alert(v1 instanceof Fruit); //false
alert(v2 instanceof Fruit); //true
alert(v1 instanceof Object); //true 任何對象均繼承自Object
alert(v2 instanceof Object); //true 任何對象均繼承自Object

可以將上面的函數簡化：Student和Fruit對象中共有同樣的方法移到構造函數外部

function Student(name, age) {
 this.name = name;
 this.age = age;
}
function Fruit(name, color) {
 this.name = name;
 this.color = color;
}；
function alertName() {
 alert(this.name);
}

我們通過將alertName()函數定義為全局函數，這樣對象中的alertName屬性則被設置為指向該全局函數的指針。由此stu1和stu2共享了該全局函數，解決了內存浪費的問題

但是，通過全局函數的方式解決對象內部共享的問題，終究不像一個好的解決方法。如果這樣定義的全局函數多了，我們想要將自定義對象封裝的初衷便幾乎無法實現了。

更好的方案是通過原型對象模式來解決。

4.原型的模式創建對象

原型鏈甚至原型繼承，是整個JS中最難的一部分也是最不好理解的一部分，在這里由于我們課程定位的原因，如果對js有興趣的同學，可以去查閱一下相關JS原型的一些知識點。

function Student() {
  this.name = 'easy';
  this.age = 20;
}
Student.prototype.alertName = function(){
  alert(this.name);
};
var stu1 = new Student();
var stu2 = new Student();
stu1.alertName(); //easy
stu2.alertName(); //easy
alert(stu1.alertName == stu2.alertName); //true 二者共享同一函數

以上就是億速云小編為大家收集整理的使用JavaScript怎么在面向對象中創建對象，如何覺得億速云網站的內容還不錯，歡迎將億速云網站推薦給身邊好友。