2. 程式人生 > >詳解js原型，建構函式以及class之間的原型關係

詳解js原型，建構函式以及class之間的原型關係

阿新 • • 發佈：2018-11-27

原型

概念

在建構函式建立的時候，系統預設的幫建構函式建立並關聯一個物件 這個物件就是原型

作用

在原型中的所有屬性和方法，都可以被和其關聯的建構函式創建出來的所有的物件共享

訪問原型

建構函式名.prototype 例項化的物件.__proto __

原型的簡單使用
  1. 利用物件的動態特性為原型物件增加成員
  2. 直接替換原型物件（jq核心方法的實現 就是使用原型替換的思想）
 function Person (name) {
      this.name = name
    }

    Person.prototype.fn = function
 
 () {
      console.log('hello world')
      console.log(this.name)
    }

    var p = new Person('小紅')

    p.fn()
    p.name = '曉麗'
    p.fn()
    console.log(Person.prototype)
    console.log(p)
複製程式碼

image
image

1. prototype

含義： 是一個函式的屬性，這個屬性是一個指標，指向一個物件 作用： 建構函式呼叫 訪問該建構函式所關聯的原型物件

2. proto

含義： 是一個物件擁有的內建屬性，是js內部使用尋找原型鏈的屬性，通過該屬性可以允許例項物件直接訪問到原型

3. constructor

含義：原型物件的constructor 指向其建構函式,如果替換了原型物件之後，這個constructor屬性就不準確，需要手動補充一下

image

原型鏈

image

建構函式以及js原生Object物件之間的原型關係

image

原型的注意事項

  • 當物件在訪問屬性和方法的時候，會現在自身查詢，如果沒有才回去原型中找。（一級一級傳遞 形成了原型鏈）
  • 替換原型物件的時候，替換之前建構函式建立的物件A和替換之後建立的物件B，A和B的原型是不一致的。
  • 物件能夠訪問的原型，就是在物件建立的那一刻，和建構函式關聯的那個原型

擴充套件以及延伸

image

建構函式

在很多程式語言中，如java，objectC,c++等，都存在類的概念，類中有私有屬性，私有方法等，通過類來實現面對物件的繼承，但是，在ES5以及以前中不像上面這幾種語言一樣，有嚴格的類的概念。js通過建構函式以及原型鏈來實現繼承。

特點
  • 首字母必須為大寫，用來區分普通函式
  • 內部使用的this物件，來指向即將要生成的例項物件
  • 使用new 關鍵字來生成例項物件（下面為new關鍵字的具體實現）
    var obj = new Date()
    // 可以分解為
    var obj = {};
    obj.__proto__ = Date.prototype;
    Base.call(obj)

複製程式碼
缺點
  • 所有的例項物件都可以繼承構造器函式中的屬性和方法，但是同一個物件例項之間，無法共享屬性。
  • 如果方法在建構函式內部，每次new一個例項物件的時候，都會建立內部的這些方法，並且不同的例項物件之間，不能共享這些方法，造成了資源的浪費（於是有了原型這個概念）

實現方式 （簡單列舉幾種）

建構函式模式（自定義建構函式）

建構函式與普通函式的區別

//建構函式
function Egperson (name,age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        alert(this.name);
     }
}
var person = new Egperson('mike','18'); //this-->person
person.sayName();  //'mike'


//普通函式
function egPerson (name,age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        alert(this.name);
     }
}
egPerson('alice','23'); //this-->window
window.sayName();  //'alice'

複製程式碼

工廠模式

function CreatePerson(name, age, gender){
    var obj = {};
    obj.name = name;
    obj.age = age;
    obj.gender = gender;
    //由於是函式呼叫模式，所以this打印出來是window
    console.log(this);
    return obj;
}
var p = CreatePerson("小明", 18, "male");  // 呼叫方式是函式的呼叫方式
複製程式碼

寄生模式

function CreatePerson(name, age, gender){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.gender = gender;
    //這裡的this指向new 創建出來的物件
    console.log(this);
    return obj;
}
var p = new CreatePerson("小明", 18, "male");  // 呼叫方式是函式的呼叫方式

複製程式碼

動態原型模式

function Person(name, age, job) {
    //屬性
    this.name = name;
    this.age = age;
    this.job = job;
    
    //方法
    if(typeof this.sayName != "function") {
        //所有的公有方法都在這裡定義
        Person.prototype.sayName = function() {
            alert(this.name);
        }；

        Person.prototype.sayJob = function() {
            alert(this.job);
        };


        Person.prototype.sayAge = function() {
            alert(this.age);
        };
    }
}

var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

person1.sayName();        //Nicholas
person2.sayName();        //Greg


複製程式碼

js實現繼承的方式: 混入式繼承，原型繼承以及經典繼承，ES6的Class也可以實現繼承

Class 詳解

基本上，ES6 的class可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓物件原型的寫法更加清晰、更像面向物件程式設計的語法而已。

// ES5
function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);
// ES6

//定義類
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}


複製程式碼

特點

  • class中的constructor函式相當於ES5中的建構函式（宣告屬性以及靜態方法，這種類建立屬性和建立方法參照上面動態原型模式的建構函式。個人感覺有很多相似之處
  • 類中定義方法的時候，前面不加function，後面不加，可被例項物件也就是子類繼承的方法 定義在類的prototype屬性中。
  • 類的內部定義的所有方法都是不可列舉的
  • 類和模組內部預設採用嚴格模式
  • 子類繼承父類以後，必須在constructor中呼叫時super方法，否則不能新建例項，因為子類沒有屬於自己的this物件，而是繼承了父類的this物件對其進行加工

類中的原型鏈關係

每一個物件都有__proto__屬性，指向對應的建構函式的prototype屬性。Class 作為建構函式的語法糖，同時有prototype屬性和__proto__屬性，因此同時存在兩條繼承鏈。

  1. 子類的__proto__屬性，表示建構函式的繼承，總是指向父類。
  2. 子類prototype屬性的__proto__屬性，表示例項方法的繼承，總是指向父類的prototype屬性。
class A {
}

class B extends A {
}

B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true
複製程式碼

類的繼承內部實現

class A {
}

class B {
}

// B 的例項繼承 A 的例項
Object.setPrototypeOf(B.prototype, A.prototype);

// B 繼承 A 的靜態屬性
Object.setPrototypeOf(B, A);

const b = new B();

Object.setPrototypeOf = function (obj, proto) {
  obj.__proto__ = proto;
  return obj;
}
複製程式碼

作為一個物件，子類（B）的原型（__proto__屬性）是父類（A）；

作為一個建構函式，子類（B）的原型物件（prototype屬性）是父類的原型物件（prototype屬性）的例項。

Object.create(A.prototype);
// 等同於
B.prototype.__proto__ = A.prototype;
複製程式碼

例項的 proto 屬性

子類例項的__proto__屬性的__proto__屬性，指向父類例項的__proto__屬性。也就是說，子類的原型的原型，是父類的原型。

var p1 = new Point(2, 3);
var p2 = new ColorPoint(2, 3, 'red');

p2.__proto__ === p1.__proto__ // false
p2.__proto__.__proto__ === p1.__proto__ // true

複製程式碼

類中this指向問題

類的方法內部含有this，預設指向類的例項。但是當類中的例項方法提取出來使用的時候，this指向執行時所在環境。

解決方法（新版react中，在宣告繫結方法的時候 三種方式與此相同）

class Logger {
  constructor() {
    this.printName = this.printName.bind(this);
  }

  // ...
}

class Logger {
  constructor() {
    this.printName = (name = 'there') => {
      this.print(`Hello ${name}`);
    };
  }

  // ...
}

複製程式碼

ES5與ES6 實現繼承的區別

  1. 在ES5中，繼承實質上是子類先建立屬於自己的this，然後再將父類的方法新增到this（也就是使用Parent.apply(this)的方式

  2. 而在ES6中，則是先建立父類的例項物件this，然後再用子類的建構函式修改this。

相關推薦

詳解js原型，建構函式以及class之間的原型關係

原型 概念 在建構函式建立的時候，系統預設的幫建構函式建立並關聯一個物件 這個物件就是原型 作用 在原型中的所有屬性和方法，都可以被和其關聯的建構函式創建出來的所有的物件共享 訪問原型 建構函式名.prototype 例項化的物件.__proto __ 原型的簡單使

C++建構函式詳解及顯示呼叫建構函式

                         

C++建構函式詳解（包含複製建構函式）

建構函式是幹什麼的該類物件被建立時，編譯系統物件分配記憶體空間，並自動呼叫該建構函式，由建構函式完成成員的初始化工作，故：建構函式的作用：初始化物件的資料成員。建構函式的種類複製程式碼 1 class Complex  2 {          3   4 private :

理解JS的原型物件，建構函式，物件之間的關係

第一次看原型的時候感覺沒咋看懂，這周又重新把原型物件，建構函式，物件看了一遍，理解頗多。在理解這三者及這三者的關係之前必須先熟悉的掌握一些前提知識，不然容易混淆。 前提補充： 物件（鍵值對的集合）的動態特性： 物件創建出來為物件新增新的屬性和方法/訪問物件的方法和屬性：

c++類詳解：訪問許可權，建構函式，拷貝建構函式，解構函式

類的定義 類可以看做是一種資料型別，類這種資料型別是一個包含成員變數和成員函式的集合。類的成員變數和普通變數一樣，也有資料型別和名稱，佔用固定長度的記憶體。但是，在定義類的時候不能對成員變數賦值，因為類只是一種資料型別或者說是一種模板，本身不佔用記憶體空間，而變數的值則需要

js中三種作用域詳解（全域性，函式，塊級）

1.全域性變數：宣告在函式外部的變數（所有沒有var直接賦值的變數都屬於全域性變數） 2.區域性變數：宣告在函式內部的變數（所有沒有var直接賦值的變數都屬於全域性變數） JS中變數申明分顯式申明和隱

Js中的原型鏈繼承，建構函式繼承，組合繼承

昨天學習了一下js的這三種繼承，感覺面試還是會問到，今天早上就總結了一下。都寫到了程式碼裡。 <script type="text/javascript"> // -----------------------------------------原型鏈繼承

詳解rsync安裝，配置以及同步過程

ffffff password .rpm 依次 文件同步 存在 word chmod yum 安裝 實驗環境：centos7.3實驗主機信息：192.168.101.185-服務器端 192.168.101.208-客戶端實驗目的：使用rsync將服務器端的文件同步到客

Linux route命令詳解和使用，以及網卡命令詳解

linux 路由 網卡一 路由的基礎知識：1）路由概念路由： 跨越從源主機到目標主機的一個互聯網絡來轉發數據包的過程路由器：能夠將數據包轉發到正確的目的地，並在轉發過程中選擇最佳路徑的設備路由表：在路由器中維護的路由條目，路由器根據路由表做路徑選擇直連路由：當在路由器上配置了接口的IP地址，並且接口狀態為

JS中的建構函式與與原型物件的理解

一：JS中的建構函式 在這裡可以這樣理解建構函式 ，即構造一個物件的函式就叫做建構函式； 1：那麼我們使用建構函式的目的是構造一個物件 ，如何構造一個物件就是我下面要說的： 在JavaScript中，任何合法的函式都可以作為物件的建構函式，這包括系統內建的函式， 也包括自己定義的函式

一.js高階(2) -建構函式-原型物件

3.建構函式用new建立例項的過程 　　1)       建立一個空物件 　　2)       將this 指向例項, 將函式的作用域賦給空物件 　　3)  &nb

一篇文章理解JS繼承——原型鏈/建構函式/組合/原型式/寄生式/寄生組合/Class extends

說實在話，以前我只需要知道“寄生組合繼承”是最好的，有個祖傳程式碼模版用就行。最近因為一些事情，幾個星期以來一直心心念念想整理出來。本文以《JavaScript高階程式設計》上的內容為骨架，補充了ES6 Class的相關內容，從我認為更容易理解的角度將繼承這件事

C++類中的一些細節(過載、重寫、覆蓋、隱藏，建構函式、解構函式、拷貝建構函式、賦值函式在繼承時的一些問題)

1 函式的過載、重寫（重定義）、函式覆蓋及隱藏 其實函式過載與函式重寫、函式覆蓋和函式隱藏不是一個層面上的概念。前者是同一個類內，或者同一個函式作用域內，同名不同引數列表的函式之間的關係。而後三者是基類和派生類函式不同情況下的關係。 1.1 函式過載

C++在單繼承、多繼承、虛繼承時，建構函式、複製建構函式、賦值操作符、解構函式的執行順序和執行內容

一、本文目的與說明     1. 本文目的：理清在各種繼承時，建構函式、複製建構函式、賦值操作符、解構函式的執行順序和執行內容。     2. 說明：雖然複製建構函式屬於建構函式的一種，有共同的地方，但是也具有一定的特殊性，所以在總結它的性質時將它單獨列出來了。  

spring單例和多例詳解的實驗，以及如何使用多例模式

原文：http://www.tuicool.com/articles/RzIvAj spring生成物件預設是單例的。通過scope屬性可以更改為多例。 <bean id="user" class="modle.User" scope="prototype"&

圖文詳解JS氣泡排序，看完秒懂！

以[23,9,78,6,45]為例，用氣泡排序法從小到大排列： function bubbleSort(){ var array = [23,9,78,6,45]; cons

MINE筆記-面向物件程式設計，原型鏈的理解，建構函式，原型物件，例項化物件，prototype 運用

// to do list 建立建構函式，例項化物件，來做面向物件程式設計 // 建立建構函式--原型函式（原型物件） function person(name,age,id){ this.name = name; this.age = age; this.id =id // c

原型，原型鏈，物件，建構函式之間的聯絡。

一、首先說一下什麼是物件？ ES把物件定義為：“無序屬性的集合，其屬性可以包含基本值，物件和函式”。嚴格來講，這就相當於說物件是一組沒有特定順序的值。物件的每個屬性或方法都有一個名字，而每個名字都對映到一個值。正因為這樣，我們可以把ES的物件想象成散列表：無非就是一組名值對

java反射機制 以及通過反射獲得類的變數欄位，方法，建構函式

        Class clz =Class.forName("day_29_ReflectAndJson.Person");         //前面獲取本類及其父類共有的方法就不再寫了 直接獲得本類中的所有方法 並傳引數後呼叫本方法         Method[] method=clz.getDec

詳解C#委託，事件與回撥函式

.Net程式設計中最經常用的元素，事件必然是其中之一。無論在ASP.NET還是WINFrom開發中，窗體載入(Load),繪製(Paint),初始化(Init)等等。“protected void Page_Load(object sender, EventArgs e)”這