javascript創(chuàng)建對象方式

newsning 發(fā)布于2019-08-21 14:17 / 1112人閱讀

摘要：枚舉對象上的實例屬性用方法原型模式優(yōu)缺點優(yōu)點不用每個方法都要在每個實例上重申一遍缺點很少有人多帶帶使用原型模式地。。組合使用構造函數(shù)模式和原型模式這種模式是目前使用最廣泛認同度最高的一種創(chuàng)建自定義類型的方法。是用來定義引用類型的一種默認模式。

javascript創(chuàng)建對象方式

工廠模式

構造函數(shù)模式

原型模式

工廠模式

    function createPerson(name, age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        return obj; //一定要返回，否則打印undefined:undefined
    }
    var person1 = new createPerson("Young",18);
    console.log(person1.name + ":" + person1.age);

優(yōu)點：工廠模式可以解決創(chuàng)建多個相似對象

缺點：沒有解決對象識別問題（怎樣確定一個對象的類型）

學習判斷對象類型： http://www.cnblogs.com/flyjs/...

構造函數(shù)模式

    function Person(name,age){
      this.name = name;
      this.age = age;
    }
    var person1 = new Person("Young",18);
    console.log(person1.name + ":" + person1.age);

在說優(yōu)缺點之前，先來說說她本身的一點小故事吧

將構造函數(shù)當做函數(shù)使用

    function Person(name,age){
      this.name=name;
      this.age=age;
      this.sayName=function(){
        return this.name;
      }
    }
    
    //當做構造函數(shù)使用
    var person1 = new Person("Young", 18);
    person1.sayName();
    console.log(person1.name + ":" + person1.age);
    
    //當做普通函數(shù)調用
    Person("Wind", 18);
    console.log(window.sayName());
    
    //在另一個作用域中調用
    var obj = new Object();
    Person.call(obj, "bird", 100);
    console.log(obj.sayName());

構造函數(shù)優(yōu)缺點

優(yōu)點：可以將它的實例標識為一種特定類型

缺點：每個方法都要在每個實例上重新創(chuàng)建一遍。當然你也可以這樣改：

    function Person(name, age){
      this.name = name;
      this.age = age;
      this.sayName = sayName;
    }
    function sayName(){
      return this.name;
    }

改為調用全局函數(shù)，這樣一來毫無封裝性可言。。。接下來的原型模式可以彌補這個的不足

原型模式

    function Person(){
      
    }
    Person.prototype.name = "Young";
    Person.prototype.age = 18;
    Person.prototype.sayName = function(){
      return this.name;
    }
    
    var person1 = new Person();
    console.log(person1.sayName());
    var person2 = new Person();
    console.log(person1.sayName());
    alert(person1.sayName === person2.sayName);
    //person1和person2訪問的是同一組屬性的同一個sayName()函數(shù)

雖然可以通過對象實例訪問保存在原型中的值，但卻不能通過實例對象重寫原型中的值

    function Person(){
      
    }
    Person.prototype.name="Young";
    Person.prototype.age=18;
    Person.prototype.sayName=function(){
      return this.name;
    }
    
    var person1=new Person();
    var person2=new Person();
    person1.name="Wind";
    
    console.log(person1.sayName());//Wind
    console.log(person2.sayName());//Young
    alert(person1.sayName==person2.sayName);//true

在我們調用person1.sayName的時候，會先后執(zhí)行兩次搜索，解析器先確定實例person1是否有sayName的屬性，有則調用自己的屬性，沒有則搜索原型中的屬性。

    function Person(){
      
    }
    Person.prototype.name="Young";
    Person.prototype.age=18;
    Person.prototype.sayName=function(){
      return this.name;
    }
    
    var person1=new Person();
    var person2=new Person();
    
    person1.name="Wind";
    console.log(person1.sayName());//Wind
    console.log(person2.sayName());//Young
    
    delete person1.name;
    console.log(person1.sayName());//Young
    console.log(person2.sayName());//Young

使用hasOwnPropertyType方法可以檢測一個屬性是存在與原型中還是存在于實例中，該方法是從Object繼承來的，實例中為true，原型中為false。

枚舉對象上的實例屬性用Object.keys()方法

    function Person(){
      
    }
    Person.prototype.name="Young";
    Person.prototype.age=18;
    Person.prototype.sayName=function(){
      return this.name;
    }
    
    var keys=Object.keys(Person.prototype);
    console.log(keys);//["name", "age", "sayName"]

原型模式優(yōu)缺點

優(yōu)點：不用每個方法都要在每個實例上重申一遍

缺點：很少有人多帶帶使用原型模式地。。問題詳列

    function Person(){
      
    }
    Person.prototype={
      constructor:Person,
      name:"Young",
      age:18,
      friends:["Big","Pig"],
      sayName:function(){
      return this.name;
      }
    };
    var p1=new Person();
    var p2=new Person();
    p1.friends.push("Mon");
    console.log(p1.friends);//["Big", "Pig", "Mon"]
    console.log(p2.friends);//["Big", "Pig", "Mon"]

正是因為實例一般都要有自己的屬性，而我們這里將他放在了Person.prototype中，所以隨著p1的修改，整個實例包括原型都修改了。那么，我們可以組合使用構造函數(shù)模式和原型模式。

組合使用構造函數(shù)模式和原型模式

    function Person(name,age){
      this.name=name;
      this.age=age;
      this.friends=["Big","Pig"];
    }
    Person.prototype={
      sayName:function(){
      return this.name;
      }
    };
    var p1=new Person("Young",18);
    var p2=new Person("Wind",78);
    p1.friends.push("Raganya");
    console.log(p1.friends);//["Big", "Pig", "Raganya"]
    console.log(p2.friends);//["Big", "Pig"]
    console.log(p1.friends==p2.friends);//false
    console.log(p1.sayName==p2.sayName);//true

這種模式是目前使用最廣泛、認同度最高的一種創(chuàng)建自定義類型的方法。是用來定義引用類型的一種默認模式。

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87854.html

白話解釋 Javascript 原型繼承(prototype inheritance)

摘要：我們有了構造函數(shù)之后，第二步開始使用它構造一個函數(shù)。來個例子這種方式很簡單也很直接，你在構造函數(shù)的原型上定義方法，那么用該構造函數(shù)實例化出來的對象都可以通過原型繼承鏈訪問到定義在構造函數(shù)原型上的方法。來源: 個人博客白話解釋 Javascript 原型繼承(prototype inheritance) 什么是繼承? 學過面向對象的同學們是否還記得，老師整天掛在嘴邊的面向對象三大特...

kid143 2019-08-21 15:09 評論0 收藏0
JavaScript學習筆記(二) 對象與函數(shù)

摘要：在中函數(shù)是一等對象，它們不被聲明為任何東西的一部分，而所引用的對象稱為函數(shù)上下文并不是由聲明函數(shù)的方式?jīng)Q定的，而是由調用函數(shù)的方式?jīng)Q定的。更為準確的表述應該為當對象充當函數(shù)的調用函數(shù)上下文時，函數(shù)就充當了對象的方法。引言：當理解了對象和函數(shù)的基本概念，你可能會發(fā)現(xiàn)，在JavaScript中有很多原以為理所當然（或盲目接受）的事情開始變得更有意義了。 1.JavaScript...

jeffrey_up 2019-08-21 10:23 評論0 收藏0
JavaScript對象

摘要：對象的分類內置對象原生對象就是語言預定義的對象，在標準定義，有解釋器引擎提供具體實現(xiàn)宿主對象指的是運行環(huán)境提供的對象。不過類型是中所有類型的父級所有類型的對象都可以使用的屬性和方法，可以通過的構造函數(shù)來創(chuàng)建自定義對象。對象 javaScript中的對象，和其它編程語言中的對象一樣，可以比照現(xiàn)實生活中的對象來理解。在JavaScript中，一個對象可以是一個單獨擁有屬性和類型的實體。和...

xavier 2019-08-23 11:01 評論0 收藏0
JavaScript中的面向對象（object-oriented）編程

摘要：對象在中，除了數(shù)字字符串布爾值這幾個簡單類型外，其他的都是對象。那么在函數(shù)對象中，這兩個屬性的有什么區(qū)別呢表示該函數(shù)對象的原型表示使用來執(zhí)行該函數(shù)時這種函數(shù)一般成為構造函數(shù)，后面會講解，新創(chuàng)建的對象的原型。這時的函數(shù)通常稱為構造函數(shù)。。本文原發(fā)于我的個人博客，經(jīng)多次修改后發(fā)到sf上。本文仍在不斷修改中，最新版請訪問個人博客。最近工作一直在用nodejs做開發(fā)，有了nodejs，...

JerryZou 2019-08-21 10:26 評論0 收藏0
JS對象(1)重新認識面向對象

摘要：對象重新認識面向對象面向對象從設計模式上看，對象是計算機抽象現(xiàn)實世界的一種方式。除了字面式聲明方式之外，允許通過構造器創(chuàng)建對象。每個構造器實際上是一個函數(shù)對象該函數(shù)對象含有一個屬性用于實現(xiàn)基于原型的繼承和共享屬性。 title: JS對象(1)重新認識面向對象 date: 2016-10-05 tags: JavaScript 0x00 面向對象從設計模式上看，對象是...

superw 2019-08-21 11:17 評論0 收藏0
JavaScript基礎之創(chuàng)建對象、原型、原型對象、原型鏈

摘要：在最開始的時候，原型對象的設計主要是為了獲取對象的構造函數(shù)。同理數(shù)組通過調用函數(shù)通過調用原型鏈中描述了原型鏈的概念，并將原型鏈作為實現(xiàn)繼承的主要方法。對象的創(chuàng)建在JavaScript中創(chuàng)建一個對象有三種方式。可以通過對象直接量、關鍵字new和Object.create()函數(shù)來創(chuàng)建對象。 1. 對象直接量創(chuàng)建對象最直接的方式就是在JavaScript代碼中使用對象直接量。在ES5...

wangbjun 2019-08-22 15:16 評論0 收藏0