javascript創建對象方式

newsning 發布于2019-08-21 14:17 / 1113人閱讀

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

javascript創建對象方式

工廠模式

構造函數模式

原型模式

工廠模式

    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);

優點：工廠模式可以解決創建多個相似對象

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

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

構造函數模式

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

在說優缺點之前，先來說說她本身的一點小故事吧

將構造函數當做函數使用

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

構造函數優缺點

優點：可以將它的實例標識為一種特定類型

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

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

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

原型模式

    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()函數

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

    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的時候，會先后執行兩次搜索，解析器先確定實例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"]

原型模式優缺點

優點：不用每個方法都要在每個實例上重申一遍

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

    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的修改，整個實例包括原型都修改了。那么，我們可以組合使用構造函數模式和原型模式。

組合使用構造函數模式和原型模式

    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

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

GPU云服務器云服務器 js創建對象方式 java創建對象的幾種方式電腦創建快捷方式對象聲明方式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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