每天一篇javascript學習小結（物件導向程式設計）

首頁

web前端

js教程

每天一篇javascript學習小結（物件導向程式設計）_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:31 PM

物件導向程式設計

1、物件導向的工廠方法

 function createPerson(name, age, job){
   var o = new Object();
   o.name = name;
   o.age = age;
   o.job = job;
   o.sayName = function(){
    alert(this.name);
   }; 
   return o;
  }
  
  var person1 = createPerson("Nicholas", 29, "Software Engineer");
  var person2 = createPerson("Greg", 27, "Doctor");
  
  person1.sayName(); //"Nicholas"
  person2.sayName(); //"Greg"

登入後複製

工廠模型的方法的缺點是會產生大量重複程式碼！

2、建構子模式建立物件

 function Person(name, age, job){
   this.name = name;
   this.age = age;
   this.job = job;
   this.sayName = function(){
    alert(this.name);
   }; 
  }
  
  var person1 = new Person("Nicholas", 29, "Software Engineer");
  var person2 = new Person("Greg", 27, "Doctor");
  
  person1.sayName(); //"Nicholas"
  person2.sayName(); //"Greg"
  
  alert(person1 instanceof Object); //true
  alert(person1 instanceof Person); //true
  alert(person2 instanceof Object); //true
  alert(person2 instanceof Person); //true
  
  alert(person1.constructor == Person); //true
  alert(person2.constructor == Person); //true
  
  alert(person1.sayName == person2.sayName); //false

登入後複製

使用new關鍵字建立物件會經歷以下四個過程

1、建立一個新物件
2、將建構子的作用域賦給一個新物件（因此this就指向了這個新物件）
3、執行建構子的方法（為這個新物件賦值）
4、回傳新物件

3、將建構子當函數用

 function Person(name, age, job){
   this.name = name;
   this.age = age;
   this.job = job;
   this.sayName = function(){
    alert(this.name);
   };
  }
  
  var person = new Person("Nicholas", 29, "Software Engineer");
  person.sayName(); //"Nicholas"
  
  Person("Greg", 27, "Doctor"); //adds to window
  window.sayName(); //"Greg"
  
  var o = new Object();
  Person.call(o, "Kristen", 25, "Nurse");
  o.sayName(); //"Kristen"

登入後複製

建構函式當做函式使用就和普通的函式沒有任何不同，它屬於window物件下面新增的方法而已。由於構造函數創建的對象實際上是創建一個新對象，因此在本質上兩者還是不一樣的，還是分離的，他們的方法還是不一樣的！

4、將共有的方法方法全域解決不一致的問題

 function Person(name, age, job){
   this.name = name;
   this.age = age;
   this.job = job;
   this.sayName = sayName;
  }
  
  function sayName(){
   alert(this.name);
  }
  
  var person1 = new Person("Nicholas", 29, "Software Engineer");
  var person2 = new Person("Greg", 27, "Doctor");
  
  person1.sayName(); //"Nicholas"
  person2.sayName(); //"Greg"
  
  alert(person1 instanceof Object); //true
  alert(person1 instanceof Person); //true
  alert(person2 instanceof Object); //true
  alert(person2 instanceof Person); //true
  
  alert(person1.constructor == Person); //true
  alert(person2.constructor == Person); //true
  
  alert(person1.sayName == person2.sayName); //true

登入後複製

雖然上面的方法解決了一致的問題，但是定義的全局的方法本身屬於window，那麼局部和全局就沒有分開！所以這個方法使用的並不多見！也不建議使用。

5、原型模式

我們創建的任何的一個函數都有一個原型對象，這個屬性是一個指針，它指向一個對象，而這個對象的作用是可以有特定的類型的所有的實例共享的方法！

 function Person(){
  }
  
  Person.prototype.name = "Nicholas";
  Person.prototype.age = 29;
  Person.prototype.job = "Software Engineer";
  Person.prototype.sayName = function(){
   alert(this.name);
  };
  
  var person1 = new Person();
  person1.sayName(); //"Nicholas"
  
  var person2 = new Person();
  person2.sayName(); //"Nicholas"
  
  alert(person1.sayName == person2.sayName); //true
  
  alert(Person.prototype.isPrototypeOf(person1)); //true
  alert(Person.prototype.isPrototypeOf(person2)); //true
  
  //only works if Object.getPrototypeOf() is available
  if (Object.getPrototypeOf){
   alert(Object.getPrototypeOf(person1) == Person.prototype); //true
   alert(Object.getPrototypeOf(person1).name); //"Nicholas"
  }

登入後複製

理解原型

無論何時只要是建立了一個函數，就會建立一個原型屬性，這個屬性指向函數的原型物件。在預設的情況下，原型物件都會包含一個constructor（建構函式屬性），這個屬性包含一個指向prototype屬性所在函數的指標！

屬性讀取的順序

每當程式碼讀取某個物件的屬性時候，都會執行一次搜索，目標是具有給定名字的屬性，搜尋從物件的實例本身開始查找，如有則返回，沒有則繼續搜尋該物件的原型鏈，直到搜尋到原型鏈的最外層！

 function Person(){
  }
  
  Person.prototype.name = "Nicholas";
  Person.prototype.age = 29;
  Person.prototype.job = "Software Engineer";
  Person.prototype.sayName = function(){
   alert(this.name);
  };
  
  var person1 = new Person();
  var person2 = new Person();
  
  person1.name = "Greg";
  alert(person1.name); //"Greg" 来自实例
  alert(person2.name); //"Nicholas" 来自原型

登入後複製

如果刪除了這個元素的實例屬性

function Person(){
  }
  
  Person.prototype.name = "Nicholas";
  Person.prototype.age = 29;
  Person.prototype.job = "Software Engineer";
  Person.prototype.sayName = function(){
   alert(this.name);
  };
  
  var person1 = new Person();
  var person2 = new Person();
  
  person1.name = "Greg";
  alert(person1.name); //"Greg" &#63;from instance
  alert(person2.name); //"Nicholas" &#63;from prototype
  
  delete person1.name;
  alert(person1.name); //"Nicholas" - from the prototype

登入後複製

6、hasOwnProperty方法

這個方法可以偵測一個屬性是否存在於實例中，還是存在於原型中！ hasOwnProperty是從Object繼承來的，只要給定屬性存在於物件實例中，才會回傳true.

 function Person(){
    }
    
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function(){
      alert(this.name);
    };
    
    var person1 = new Person();
    var person2 = new Person();
    
    alert(person1.hasOwnProperty("name")); //false
    alert("name" in person1); //true
    
    person1.name = "Greg";
    alert(person1.name);  //"Greg" &#63;from instance
    alert(person1.hasOwnProperty("name")); //true
    alert("name" in person1); //true
    
    alert(person2.name);  //"Nicholas" &#63;from prototype
    alert(person2.hasOwnProperty("name")); //false
    alert("name" in person2); //true
    
    delete person1.name;
    alert(person1.name);  //"Nicholas" - from the prototype
    alert(person1.hasOwnProperty("name")); //false
    alert("name" in person1); //true

登入後複製

7、Object.keys() 可列舉屬性方法

這個方法接收一個物件作為參數，傳回一個包含所有可枚舉屬性的字串陣列

 function Person(){
    }
    
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function(){
      alert(this.name);
    };
    
    var keys = Object.keys(Person.prototype);
    alert(keys);  //"name,age,job,sayName"
如果想得到所有实例的属性，无论它是否可以枚举都可以使用这个方法来获取
 function Person(){
    }
    
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function(){
      alert(this.name);
    };
    
    var keys = Object.getOwnPropertyNames(Person.prototype);
    alert(keys);  //"constructor,name,age,job,sayName"

登入後複製

此方法高版瀏覽器才支援

8、簡單的原型寫法

 function Person(){
    }
    
    Person.prototype = {
      name : "Nicholas",
      age : 29,
      job: "Software Engineer",
      sayName : function () {
        alert(this.name);
      }
    };

    var friend = new Person();
    
    alert(friend instanceof Object); //true
    alert(friend instanceof Person); //true
    alert(friend.constructor == Person); //false
    alert(friend.constructor == Object); //true

登入後複製

重寫了原型就等於將預設的原型方法覆蓋，那麼同樣的建構方法也會被重寫，而重寫的建構方法指向了Object物件！而不是原來的物件Person

如果還是想指向先前的建構方法，可以顯示的指定

 function Person(){
    }
    
    Person.prototype = {
      constructor : Person,
      name : "Nicholas",
      age : 29,
      job: "Software Engineer",
      sayName : function () {
        alert(this.name);
      }
    };

    var friend = new Person();
    
    alert(friend instanceof Object); //true
    alert(friend instanceof Person); //true
    alert(friend.constructor == Person); //true
    alert(friend.constructor == Object); //false

登入後複製

9、原型方法的動態添加

function Person(){
    }
    
    Person.prototype = {
      constructor: Person,
      name : "Nicholas",
      age : 29,
      job : "Software Engineer",
      sayName : function () {
        alert(this.name);
      }
    };
    
    var friend = new Person();
    
    Person.prototype.sayHi = function(){
      alert("hi");
    };
    
    friend.sayHi();  //"hi" &#63;works!

登入後複製

10、原生物件的原型方法

alert(typeof Array.prototype.sort);     //"function"
    alert(typeof String.prototype.substring);  //"function"

    String.prototype.startsWith = function (text) {//修改原生对象的原型方法
      return this.indexOf(text) == 0;
    };
    
    var msg = "Hello world!";
    alert(msg.startsWith("Hello"));  //true

登入後複製

11、組合使用建構子和原型模式建立物件

//构造函数模式
function Person(name, age, job){
      this.name = name;
      this.age = age;
      this.job = job;
      this.friends = ["Shelby", "Court"];
    }
    //原型模式
    Person.prototype = {
      constructor: Person,
      sayName : function () {
        alert(this.name);
      }
    };
    
    var person1 = new Person("Nicholas", 29, "Software Engineer");
    var person2 = new Person("Greg", 27, "Doctor");
    
    person1.friends.push("Van");
    
    alert(person1.friends);  //"Shelby,Court,Van"
    alert(person2.friends);  //"Shelby,Court"
    alert(person1.friends === person2.friends); //false
    alert(person1.sayName === person2.sayName); //true

登入後複製

12、動態原型模式

function Person(name, age, job){
    
      //properties
      this.name = name;
      this.age = age;
      this.job = job;
      
      //methods
      if (typeof this.sayName != "function"){
      
        Person.prototype.sayName = function(){
          alert(this.name);
        };
        
      }
    }

    var friend = new Person("Nicholas", 29, "Software Engineer");
    friend.sayName();

登入後複製

13、寄生建構子模式

 function Person(name, age, job){
var o = new Object();//依赖全局对象初始化一个对象，然后再返回这个对象
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
}; 
return o;
}

var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"

function SpecialArray(){ 

//create the array
var values = new Array();

//add the values
values.push.apply(values, arguments);

//assign the method
values.toPipedString = function(){
return this.join("|");
};

//return it
return values; 
}

var colors = new SpecialArray("red", "blue", "green");
alert(colors.toPipedString()); //"red|blue|green"

alert(colors instanceof SpecialArray);

登入後複製

上訴方法有一點說明下，由於它是依賴外層對象來創建一個新對象，因此不能依賴 instanceof方法來確定屬性和方法的來源！它實際上和建構函數的沒有關係！

14、穩健建構子模式

 function Person(name, age, job){
      var o = new Object();
      o.sayName = function(){
        alert(name);
      };  
      return o;
    }
    
    var friend = Person("Nicholas", 29, "Software Engineer");
    friend.sayName(); //"Nicholas"

登入後複製

此方法不依賴任何new this 關鍵符！如果要存取物件的方法和屬性，只能透過物件已經定義好的方法來取得！

15、繼承
javascript實作繼承是透過原型鏈來實現的

function SuperType(){
      this.property = true;//定义一个属性
    }
    
    SuperType.prototype.getSuperValue = function(){//定义的原型方法
      return this.property;
    };
    
    function SubType(){
      this.subproperty = false;
    }
    
    //inherit from SuperType
    SubType.prototype = new SuperType();
    
    SubType.prototype.getSubValue = function (){
      return this.subproperty;
    };
    
    var instance = new SubType();
    alert(instance.getSuperValue());  //true
    
    alert(instance instanceof Object);   //true
    alert(instance instanceof SuperType);  //true
    alert(instance instanceof SubType);   //true

    alert(Object.prototype.isPrototypeOf(instance));  //true
    alert(SuperType.prototype.isPrototypeOf(instance)); //true
    alert(SubType.prototype.isPrototypeOf(instance));  //true
SubType继承SuperType的方法和属性，因此当instance可以直接调用SuperType的方法！
 function SuperType(){
      this.property = true;
    }
    
    SuperType.prototype.getSuperValue = function(){
      return this.property;
    };
    
    function SubType(){
      this.subproperty = false;
    }
    
    //inherit from SuperType
    SubType.prototype = new SuperType();
    
    //new method
    SubType.prototype.getSubValue = function (){
      return this.subproperty;
    };
    
    //override existing method
    SubType.prototype.getSuperValue = function (){
      return false;
    };
    
    var instance = new SubType();
    alert(instance.getSuperValue());  //false

登入後複製

上面的例子說明，重寫的原型會覆蓋先前繼承的原型，最後返回的往往不是預期的效果

 function SuperType(){
      this.property = true;
    }
    
    SuperType.prototype.getSuperValue = function(){
      return this.property;
    };
    
    function SubType(){
      this.subproperty = false;
    }
    
    //inherit from SuperType
    SubType.prototype = new SuperType();
    
    //使用字面量添加的方法导致上面的方法失效了
    SubType.prototype = {
      getSubValue : function (){
        return this.subproperty;
      },
    
      someOtherMethod : function (){
        return false;
      }
    }; 
    
    var instance = new SubType();
    console.log(instance);
    alert(instance.getSuperValue());  //error!

登入後複製

下面的例子也說明重寫原型帶來的風險

 function SuperType(){
      this.colors = ["red", "blue", "green"];
    }

    function SubType(){      
    }
    
    //inherit from SuperType
    SubType.prototype = new SuperType();

    var instance1 = new SubType();
    instance1.colors.push("black");
    alert(instance1.colors);  //"red,blue,green,black"
    
    var instance2 = new SubType();
    alert(instance2.colors);  //"red,blue,green,black"

登入後複製

原型共享导致两个不同的对象调用的同一个数据
16、借用构造函数来实现继承

 function SuperType(){
      this.colors = ["red", "blue", "green"];
    }

    function SubType(){ 
      //inherit from SuperType
      SuperType.call(this);
    }

    var instance1 = new SubType();
    instance1.colors.push("black");
    alert(instance1.colors);  //"red,blue,green,black"
    
    var instance2 = new SubType();
    alert(instance2.colors);  //"red,blue,green"

登入後複製

传递参数

 function SuperType(name){
      this.name = name;
    }

    function SubType(){ 
      //inherit from SuperType passing in an argument
      SuperType.call(this, "Nicholas");
      
      //instance property
      this.age = 29;
    }

    var instance = new SubType();
    alert(instance.name);  //"Nicholas";
    alert(instance.age);   //29

登入後複製

17、组合继承方式

function SuperType(name){
      this.name = name;
      this.colors = ["red", "blue", "green"];
    }
    
    SuperType.prototype.sayName = function(){
      alert(this.name);
    };

    function SubType(name, age){ 
      SuperType.call(this, name);
      
      this.age = age;
    }

登入後複製

18、原型继承

 function object(o){
      function F(){}
      F.prototype = o;
      return new F();
    }
    
    var person = {
      name: "Nicholas",
      friends: ["Shelby", "Court", "Van"]
    };
    
    var anotherPerson = object(person);
    anotherPerson.name = "Greg";
    anotherPerson.friends.push("Rob");

登入後複製

19、寄生组合式继承

 function object(o){
      function F(){}
      F.prototype = o;
      return new F();
    }
  
    function inheritPrototype(subType, superType){
      var prototype = object(superType.prototype);  //create object
      prototype.constructor = subType;        //augment object
      subType.prototype = prototype;         //assign object
    }
                
    function SuperType(name){
      this.name = name;
      this.colors = ["red", "blue", "green"];
    }
    
    SuperType.prototype.sayName = function(){
      alert(this.name);
    };

    function SubType(name, age){ 
      SuperType.call(this, name);
      
      this.age = age;
    }

    inheritPrototype(SubType, SuperType);
    
    SubType.prototype.sayAge = function(){
      alert(this.age);
    };
    
    var instance1 = new SubType("Nicholas", 29);
    instance1.colors.push("black");
    alert(instance1.colors); //"red,blue,green,black"
    instance1.sayName();   //"Nicholas";
    instance1.sayAge();    //29
    
    
    var instance2 = new SubType("Greg", 27);
    alert(instance2.colors); //"red,blue,green"
    instance2.sayName();   //"Greg";
    instance2.sayAge();    //27

登入後複製

以上就是今天的javascript学习小结，之后每天还会继续更新，希望大家继续关注。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1422

Laravel 教程

1316

PHP教程

1267

C# 教程

1239

Related knowledge

PHP MVC 架構：建立面向未來的 Web 應用程式 Mar 03, 2024 am 09:01 AM

引言在當今快速發展的數位世界中，建立健壯、靈活且可維護的WEB應用程式至關重要。 PHPmvc架構提供了實現這一目標的理想解決方案。 MVC（模型-視圖-控制器）是一種廣泛使用的設計模式，可將應用程式的各個方面分離為獨立的元件。 MVC架構的基礎MVC架構的核心原理是分離關注點：模型：封裝應用程式的資料和業務邏輯。視圖：負責呈現資料並處理使用者互動。控制器：協調模型和視圖之間的交互，管理使用者請求和業務邏輯。 PHPMVC架構phpMVC架構遵循傳統MVC模式，但也引進了語言特定的功能。以下是PHPMVC

'PHP 物件導向程式設計模式：理解 SOLID 原則及其應用” Feb 25, 2024 pm 09:20 PM

SOLID原則是物件導向程式設計模式中的一組指導原則，旨在提高軟體設計的品質和可維護性。由羅伯特·馬丁（RobertC.Martin）提出，SOLID原則包括：單一職責原則（SingleResponsibilityPrinciple，SRP）：一個類別應該只負責一項任務，並且這個任務應該被封裝在類別中。這樣可以提高類別的可維護性和可重複使用性。 classUser{private$id;private$name;private$email;publicfunction__construct($id,$nam

PHP擴充開發：如何設計自訂函數以支援物件導向程式設計？ Jun 01, 2024 pm 03:40 PM

PHP擴充功能可以支援物件導向編程，透過設計自訂函數來建立物件、存取屬性和呼叫方法。首先建立自訂函數實例化對象，然後定義取得屬性和呼叫方法的函數。在實戰中，我們可以自訂函數來建立一個MyClass對象，取得其my_property屬性，並呼叫其my_method方法。

PHP的物件導向程式設計範式為專案管理和組織提供優勢 Sep 08, 2023 am 08:15 AM

PHP的物件導向程式設計範式為專案管理和組織提供優勢隨著網路的快速發展，各種規模的網站和應用程式如雨後春筍般湧現出來。為了滿足日益增長的需求，並提高開發效率和可維護性，採用物件導向程式設計（Object-OrientedProgramming，簡稱OOP）的方法成為了現代軟體開發的主流。在PHP這樣的動態腳本語言中，OOP為專案管理和組織帶來了許多優勢，本文將介

golang函數在物件導向程式設計中高並發場景下的應用 Apr 30, 2024 pm 01:33 PM

在物件導向編程的高並發場景中，函數在Go語言中具有廣泛應用：函數作為方法：函數可附加到結構體，實現物件導向編程，方便操作結構體資料和提供特定功能。函數作為並發執行體：函數可作為goroutine的執行體，實現並發任務執行，提升程式效率。函數作為回調：函數可作為參數傳遞給其他函數，在特定事件或操作發生時被調用，提供靈活的回調機制。

'PHP物件導向程式設計入門：從概念到實踐” Feb 25, 2024 pm 09:04 PM

什麼是物件導向程式設計？物件導向程式設計（OOP）是一種程式設計範式，它將現實世界中的實體抽象化為類，並使用物件來表示這些實體。類別定義了物件的屬性和行為，而物件則實例化了類別。 OOP的主要優點在於它可以使程式碼更易於理解、維護和重複使用。 OOP的基本概念OOP的主要概念包括類別、物件、屬性和方法。類別是物件的藍圖，它定義了物件的屬性和行為。物件是類別的實例，它具有類別的所有屬性和行為。屬性是物件的特徵，它可以儲存資料。方法是物件的函數，它可以對物件的資料進行操作。 OOP的優點OOP的主要優點包括：可重複使用性：OOP可以讓程式碼更

C++ 函式與物件導向程式設計有何不同？ Apr 11, 2024 pm 09:12 PM

函數和物件導向程式設計(OOP)在C++中提供了不同的程式機制：函數：獨立的程式碼區塊，專注於執行特定任務，不包含資料。 OOP：基於物件、類別和繼承，將資料和行為封裝在物件中。實戰案例中，計算正方形面積的函數方式簡單直接，而OOP方式封裝了資料和行為，更適合管理物件互動。選擇合適的方法取決於場景：函數適用於獨立任務，OOP適合管理複雜物件互動。

Python 入門到精通：從零基礎到專案開發 Feb 20, 2024 am 11:42 AM

1.Python簡介python是一種簡單易學、功能強大的通用程式語言，由GuidovanRossum於1991年創建。 Python的設計理念是強調程式碼的可讀性，並為開發人員提供豐富的程式庫和工具，以幫助他們快速、有效率地建立各種應用程式。 2.Python基礎語法Python的基礎語法與其他程式語言類似，包括變數、資料型別、運算子、控制流程語句等。變數用於儲存數據，資料類型定義了變數可以儲存的資料類型，運算子用於對資料進行各種操作，控制流程語句用於控製程式的執行流程。 3.Python資料類型Python中

See all articles

每天一篇javascript學習小結（物件導向程式設計）_javascript技巧

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題