js實例教程-JavaScript對象的創建初學

发布时间:2018-11-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js實例教程-JavaScript對象的創建初學脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小寶典致力於為廣大程序猿(媛)提供高品質的代碼服務,請大家多多光顧小站,小寶典在此謝過。

JavaScript最初被稱之為一門玩具性語言,主要的功能用於表單提交時的驗證。時至今日,仍然有一些人認為JavaScript非常簡單,有過其他編程語言的人學起來似乎不用幾小時看下文檔就行。其實不然,JavaScript雖然是一門腳本語言,但是他有着自己特色,如果不去了解他與眾不同的地方,那遇到的坑將數不勝數。而JavaScript中難點之一就是原型鏈,他也是JavaScript中繼承實現的重要基礎。

函數

在開始講原型鏈之前,我們先來聊一聊JavaScript中的函數。

JavaScript有5種基本類型以及一種複雜數據類型Object,Object本質上由一組無序的名值對組成。

Object其實是一種引用類型,在JavaScript中引用類型和其他如C#語言中的類有點像。我們可以把JavaScript中的引用類型假想成類,引用類型的值就是類的一個實例,即對象。

引用類型:

Object Array Date RegExp Function

我們可以看到,其實函數也是一種引用類型,即每一個函數實例可以稱之為一個對象。

創建對象

前面已經說到,在JavaScript中,對象本質就是一組名值對。那如何來創建對象呢?

方式一:使用Object構造函數創建

 VAR PErson = new Object(); person.name = 'Jack'; person.age = 18; person.sayName = function () {    console.LOG(this.name); };

早期的開發人員經常使用這種模式創建對象,不過後來又興起來一種更為簡單直接的方式。

方式二:使用對象字面量的方式創建

這種方式你可能經常在使用,但是不知道這種創建方式的名字——對象字面量。

 var person = {   name: 'Jack',   age: 18,   sayName: function () {     console.log(this.name)   } };

當你使用上面兩種方式創建單個對象時,無疑是很方便簡單的,但是現實中往往不是那麼的簡單,很多時候,我們都會面臨一些複雜的場景。如果我們需要創建多個對象,那麼採用上述方法就會產生大量重複代碼。

方式三:使用工廠模式創建

工廠模式是軟件工程領域中一種廣為人知的設計模式,通過這種模式我們可以避免在創建多個對象時產生大量重複代碼。

 function createPerson (name, age) {   var obj = new Object();   obj.name = name;   obj.age = age;   obj.sayName = function () {     console.log(this.name);   };    return obj; }  var person1 = createPerson('Jack', 20); var person2 = createPerson('Tony', 22); 

方式四:使用構造函數模式創建

雖然工廠模式解決了創建多個相似對象的問題,但是這裡卻存在另一個問題。我們知道在程序中,當我們要對某個參數進行處理時,往往會先判斷其類型或檢查其值是否符合我們的要求。

通過工廠創建的方式,顯然無法對其創建的對象進行識別。隨着JavaScript的發展,另一種方式出現了——構造函數模式。

在本文開始講函數的時候提到,每個函數都是Function類型的一個實例,即函數是對象。函數不僅可以使用函數聲明語法和函數表達式去定義,而且還可以使用Function構造函數定義。

在JavaScript中,構造函數可以用來創建特點類型的對象,比如像Object、Array以及Function這樣的原生構造函數,當然我們亦可以創建自定義構造函數。

 function Person (name, age) {   this.name = name;   this.age = age;   this.sayName = function () {     console.log(this.name);   }; } var person1 = new Person('Jack', 20); var person2 = new Person('Tony', 22);

觀察上面的代碼,我們可以發現這種寫法有點像其他OOP語言。

 class Person {   PRivate $name;   private $age;    public function __construct(name, age)   {     $this->name = name;     $this->age = age;   }    public function sayName()   {     echo $this->name;   } }

在前面的例子當中,person1和person2兩個對象都有一個constructor(構造函數)屬性,該屬性指向Person。如此一來,便可以解決對象類型的問題。我們可以使用如下方式進行判斷:

 console.log(person1.constructor == Person);  // true

方式五:使用原型模式創建

構造函數雖然好用,但是並非沒有缺點。構造函數的主要問題,就是每個方法都要在每個實例上重新創建一遍。

讓我們再看一下前面的例子:

 function Person (name, age) {   this.name= name;   this.age = age;   this.sayName = new Function('console.log(this.name)'); }

前面提供,每個函數其實就是一個對象,上面定義函數方法和之前是等價的。

面對這種情況,我們可以通過原型模式來解決。

首先我們要牢記三個概念:

構造函數(類似於OOP中的類) 實例或對象,通過new 構造函數()創建(類似於OOP中的對象) 原型對象,可以想象成所有通過new操作符產生的實例的原始對象,只要我們創建一個構造函數,那麼就會生成一個原型對象。在構造函數內部也會創建一個prototype屬性,該屬性指向原型對象。

下面我們看看如何使用原型模式來重寫上面的例子:

 function Person () {}  Person.prototype.name = 'Jack'; Person.prototype.age = 18; Person.prototype.sayName = function () {   console.log(this.name); };  var person1 = new Person();

首先我們創建了一個自定義構造函數,裡面是空的,什麼也沒加。然後,我們通過其包含的屬性prototype,為其原型對象添加屬性和方法。最後我們通過new操作符,創建了一個Person實例。這個時候,person1也擁有了name屬性、age屬性以及sayName方法。

看到這裡,如果你是新手,肯定覺得一臉蒙蔽。產生這種現象的原因其實就是JavaScript的原型鏈,也就是本文的主題。

當我們訪問person1的name屬性時,JavaScript會現在Person1實例中查找,如果找不到,就根據person1實例內部的一個指針[[prototype]](該指針指向原型對象),去尋找其原型對象,如果原型對象裡面有,那麼就會取這個值。

在這我們來回顧一下方式四中說道person1和person2兩個對象都有一個constructor,該屬性指向Person構造函數。其實從這裡可以看出,不是這兩個實例中有constructor,而是在它們的原型對象中有這個指向構造函數的constructor屬性。所以實例和構造函數是沒有直接聯繫的。

方式六:組合使用構造函數模式和原型模式創建

如果僅僅使用原型模式去創建對象,這樣又會造成一個問題。我們希望像name、age這樣的屬性,能夠通過參數進行傳遞,所以大多數情況都是結合兩種方式來創建對象的。

構造函數模式用於定義實例屬性,而原型模式用於定義方法和共享屬性

 function Person (name, age) {     this.name = name;     this.age = age; } Person.prototype.sayName = function () {   console.log(this.name); };  var person1 = new Person('Jack', 18);

JavaScript最初被稱之為一門玩具性語言,主要的功能用於表單提交時的驗證。時至今日,仍然有一些人認為JavaScript非常簡單,有過其他編程語言的人學起來似乎不用幾小時看下文檔就行。其實不然,JavaScript雖然是一門腳本語言,但是他有着自己特色,如果不去了解他與眾不同的地方,那遇到的坑將數不勝數。而JavaScript中難點之一就是原型鏈,他也是JavaScript中繼承實現的重要基礎。

函數

在開始講原型鏈之前,我們先來聊一聊JavaScript中的函數。

JavaScript有5種基本類型以及一種複雜數據類型Object,Object本質上由一組無序的名值對組成。

Object其實是一種引用類型,在JavaScript中引用類型和其他如C#語言中的類有點像。我們可以把JavaScript中的引用類型假想成類,引用類型的值就是類的一個實例,即對象。

引用類型:

Object Array Date RegExp Function

我們可以看到,其實函數也是一種引用類型,即每一個函數實例可以稱之為一個對象。

創建對象

前面已經說到,在JavaScript中,對象本質就是一組名值對。那如何來創建對象呢?

方式一:使用Object構造函數創建

 var person = new Object(); person.name = 'Jack'; person.age = 18; person.sayName = function () {    console.log(this.name); };

早期的開發人員經常使用這種模式創建對象,不過後來又興起來一種更為簡單直接的方式。

方式二:使用對象字面量的方式創建

這種方式你可能經常在使用,但是不知道這種創建方式的名字——對象字面量。

 var person = {   name: 'Jack',   age: 18,   sayName: function () {     console.log(this.name)   } };

當你使用上面兩種方式創建單個對象時,無疑是很方便簡單的,但是現實中往往不是那麼的簡單,很多時候,我們都會面臨一些複雜的場景。如果我們需要創建多個對象,那麼採用上述方法就會產生大量重複代碼。

方式三:使用工廠模式創建

工廠模式是軟件工程領域中一種廣為人知的設計模式,通過這種模式我們可以避免在創建多個對象時產生大量重複代碼。

 function createPerson (name, age) {   var obj = new Object();   obj.name = name;   obj.age = age;   obj.sayName = function () {     console.log(this.name);   };    return obj; }  var person1 = createPerson('Jack', 20); var person2 = createPerson('Tony', 22); 

方式四:使用構造函數模式創建

雖然工廠模式解決了創建多個相似對象的問題,但是這裡卻存在另一個問題。我們知道在程序中,當我們要對某個參數進行處理時,往往會先判斷其類型或檢查其值是否符合我們的要求。

通過工廠創建的方式,顯然無法對其創建的對象進行識別。隨着JavaScript的發展,另一種方式出現了——構造函數模式。

在本文開始講函數的時候提到,每個函數都是Function類型的一個實例,即函數是對象。函數不僅可以使用函數聲明語法和函數表達式去定義,而且還可以使用Function構造函數定義。

在JavaScript中,構造函數可以用來創建特點類型的對象,比如像Object、Array以及Function這樣的原生構造函數,當然我們亦可以創建自定義構造函數。

 function Person (name, age) {   this.name = name;   this.age = age;   this.sayName = function () {     console.log(this.name);   }; } var person1 = new Person('Jack', 20); var person2 = new Person('Tony', 22);

觀察上面的代碼,我們可以發現這種寫法有點像其他OOP語言。

 class Person {   private $name;   private $age;    public function __construct(name, age)   {     $this->name = name;     $this->age = age;   }    public function sayName()   {     echo $this->name;   } }

在前面的例子當中,person1和person2兩個對象都有一個constructor(構造函數)屬性,該屬性指向Person。如此一來,便可以解決對象類型的問題。我們可以使用如下方式進行判斷:

 console.log(person1.constructor == Person);  // true

方式五:使用原型模式創建

構造函數雖然好用,但是並非沒有缺點。構造函數的主要問題,就是每個方法都要在每個實例上重新創建一遍。

讓我們再看一下前面的例子:

 function Person (name, age) {   this.name= name;   this.age = age;   this.sayName = new Function('console.log(this.name)'); }

前面提供,每個函數其實就是一個對象,上面定義函數方法和之前是等價的。

面對這種情況,我們可以通過原型模式來解決。

首先我們要牢記三個概念:

構造函數(類似於OOP中的類) 實例或對象,通過new 構造函數()創建(類似於OOP中的對象) 原型對象,可以想象成所有通過new操作符產生的實例的原始對象,只要我們創建一個構造函數,那麼就會生成一個原型對象。在構造函數內部也會創建一個prototype屬性,該屬性指向原型對象。

下面我們看看如何使用原型模式來重寫上面的例子:

 function Person () {}  Person.prototype.name = 'Jack'; Person.prototype.age = 18; Person.prototype.sayName = function () {   console.log(this.name); };  var person1 = new Person();

首先我們創建了一個自定義構造函數,裡面是空的,什麼也沒加。然後,我們通過其包含的屬性prototype,為其原型對象添加屬性和方法。最後我們通過new操作符,創建了一個Person實例。這個時候,person1也擁有了name屬性、age屬性以及sayName方法。

看到這裡,如果你是新手,肯定覺得一臉蒙蔽。產生這種現象的原因其實就是JavaScript的原型鏈,也就是本文的主題。

當我們訪問person1的name屬性時,JavaScript會現在person1實例中查找,如果找不到,就根據person1實例內部的一個指針[[prototype]](該指針指向原型對象),去尋找其原型對象,如果原型對象裡面有,那麼就會取這個值。

在這我們來回顧一下方式四中說道person1和person2兩個對象都有一個constructor,該屬性指向Person構造函數。其實從這裡可以看出,不是這兩個實例中有constructor,而是在它們的原型對象中有這個指向構造函數的constructor屬性。所以實例和構造函數是沒有直接聯繫的。

方式六:組合使用構造函數模式和原型模式創建

如果僅僅使用原型模式去創建對象,這樣又會造成一個問題。我們希望像name、age這樣的屬性,能夠通過參數進行傳遞,所以大多數情況都是結合兩種方式來創建對象的。

構造函數模式用於定義實例屬性,而原型模式用於定義方法和共享屬性

 function Person (name, age) {     this.name = name;     this.age = age; } Person.prototype.sayName = function () {   console.log(this.name); };  var person1 = new Person('Jack', 18);

覺得可用,就經常來吧!Javascript技巧 腳本寶典 歡迎評論哦! js技巧,巧奪天工,精雕玉琢。小寶典獻醜了!

脚本宝典总结

以上是脚本宝典为你收集整理的js實例教程-JavaScript對象的創建初學全部内容,希望文章能够帮你解决js實例教程-JavaScript對象的創建初學所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。