JS中的原型應用（繼承與擴充套件）

阿新 • • 發佈：2019-02-19

JS中的原型

原型機制(prototype)是JavaScript中非常重要的機制，通過[[prototype]]，我們可以輕易地實現建構函式與其例項的繼承與擴充套件。

原型的概念大致如下圖展示，詳情可以參考MDN，本文主要講原型在實際中的應用。
這裡寫圖片描述

參考jQuery與zepto中的原型機制，原型的應用大致分為以下幾個部分：

定義建構函式
定義生成例項介面
定義初始化函式
提供擴充套件介面（外掛機制）
提供對外介面
繫結原型

建立一個屬於自己的庫檔案（Sojourn.js）

(function (window) {
  // 定義屬於自己的物件
  var Sojourn = {}

  // 定義建構函式 

  function S(dom, selector) {
    var i, len = dom ? dom.length : 0;
    for (i = 0; i < len; i++) {
      this[i] = dom[i];
    }
    this.length = len;
    this.selector = selector || '';
  }

  // 定義生成例項介面
  Sojourn.S = function (dom, selector) {
    return new S(dom, selector);
  }

  // 定義初始化函式
  Sojourn.init = function 
 (selector) {
    var slice = Array.prototype.slice;
    var dom = slice.call(document.querySelectorAll(selector));
    return Sojourn.S(dom, selector);
  }

  // 提供對外介面
  var $ = Sojourn.init;

  // 提供擴充套件介面
  $.fn = {
    constructor: Sojourn.S,
    // 新增方法

    // 定義一個修改元素html內容的方法
    html: function (content) 
 {
      console.log(this);
      if (content) {
        this[0].innerHTML = content;
      } else {
        alert('no change');
      }
      // 返回dom物件以實現鏈式呼叫
      return this;
    }
  }

  // 繫結原型
  Sojourn.S.prototype = S.prototype = $.fn;

  // 繫結到全域性物件
  window.$ = $;
})(window)

在HTML中使用Sojourn.js

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>prototype-test</title>
</head>

<body>
  <div id="div1">prototype test</div>

  <script src="./sojourn.js"></script>
  <script>
    // 一秒鐘後使用構造的方法改變dom元素
    setTimeout(function () {
      var div1 = $('#div1');
      // 鏈式呼叫
      div1.html().html('use Sojourn.js');

      // 擴充套件外掛
      $.fn.getNodeName = function () {
        alert(this[0].nodeName);
      }

      div1.getNodeName();
    }, 1000);
  </script>
</body>

</html>

參考資料:
MDN
《你不知道的JS》（上卷）

JS中的原型應用（繼承與擴充套件）

JS中的原型原型機制(prototype)是JavaScript中非常重要的機制，通過[[prototype]]，我們可以輕易地實現建構函式與其例項的繼承與擴充套件。原型的概念大致如下圖展示，詳情可以參考MDN，本文主要講原型在實際中的應用。參考

redis 在 php 中的應用（Sorted-set篇）

區間 arr 基數計算元素 store size count body 上一篇：redis 在 php 中的應用（Set篇）本文為我閱讀了 redis參考手冊之後編寫，註意 php_redis 和 redis-cli 的區別（主要是返回值類型和參數用法） Redis

走入計算機的第二十九天（繼承與派生）

利用過程調用概念針對 sed ive .cn log 一什麽是繼承繼承是一種創建新類的方式，在python中，新建的類可以繼承一個或多個父類，父類又可稱為基類或超類，新建的類稱為派生類或子類　　單繼承：就相當於子類繼承了一個父類。　多繼承：就相當於子類

SLAM中的變換（旋轉與位移）表示方法

col oat pla gin 分享圖片 lock sla right post １、旋轉矩陣註：旋轉矩陣標題下涉及到的SLAM均不包含位移。根據同一點P在不同坐標系下e(e1,e2,e3)e‘(e1‘,e2‘,e3‘)的坐標a(a1,a2,a3)a‘(a1‘,a2‘,

private與protected的使用（繼承與派生）

class base{ private: int a1; protected: int b1; public: base(int a, int b) :a1(a), b1(b){} ~base(){}; void show(){ cout << a1 <&l

linux系統中的防火牆（iptables與firewalld）——iptables

iptables 關閉firewalld開啟iptables 相關概念 IPTABLES 是與最新的 3.5 版本 Linux 核心整合的 IP 資訊包過濾系統。如果 Linux 系統連線到因特網或 LAN、伺服器或連線 LAN 和因特網的代理伺服器，則該系統有利於在 Lin

linux系統中的防火牆（iptables與firewalld）——firewalld

防火牆防火牆是整個資料包進入主機前的第一道關卡。防火牆主要通過Netfilter與TCPwrappers兩個機制來管理的。 1）Netfilter：資料包過濾機制 2）TCP Wrappers：程式管理機制關於資料包過濾機制有兩個軟體：firewalld與iptables cento

Linux中常用命令（檔案與目錄）

1、pwd 檢視當前目錄（Print Working Directory） 2、cd 切換工作目錄（Change Directory）（1）格式：cd [目錄位置] 　　特殊目錄：　　.當前目錄　　..上一級目錄　　~使用者主目錄　　-上個

iconfont 在vue專案中的應用（icon-component元件）

前言：上一篇記錄了iconfont的三種基本使用方法。在Vue中應該如何使用吶？Vue中的元件化思想很明確，要提高元件的複用率，增強專案的可維護性，擴充套件性。以下是採用icontfont的使用方式之symbol封裝的icon-component元件。 //components/Icon-s

Java基礎（3）Java中的日期（Date與Calendar）

一、關於Date private static void dateTest(){ //定義時區，可以避免虛擬機器時間與系統時間不一致的問題 // TimeZone.setDefault(TimeZ

const在類的成員函式中的應用（三種const）

直接進入主題：請看程式 const Stock & Stock::topval (const Stock & s) const { if (s.toltal_val > total_val) return s; else ret

Hystrix斷路器在微服務閘道器中的應用（Spring Cloud Gateway）

前文回顧在之前的一篇文章：微服務閘道器Zuul遷移到Spring Cloud Gateway，我們講解了如何從Zuul遷移到新的元件：Spring Cloud Gateway，以及擴充套件了微服務閘道器的功能，包括限流過濾器、斷路器過濾器等。然而很多讀者在使用的時候反饋，使用POS

redis 在 php 中的應用（事務 [ Transaction ] 篇）

目錄： Transaction（事務） Transaction（事務） 1、WATCH Redis Watch 命令用於監視一個(或多個) key ，如果在事務執行之前這個(或這些) key 被其他命令所改動，那麼事務將被打斷語法： redis 127.0

JS中的常量（基本資料型別）和內建物件

JS中的基本資料型別： String 、number、null、boolean、undefined、object、symbol（ES6） 1、利用typeof運算子時其中只有null是異常的，typeof（null）=object，所以在判斷變數型別是否為null時要注意。同時利用typeof時對於沒有宣

JMS訊息中介軟體原理及ActiveMQ在企業中的應用（接上篇）

程式碼實現：傳送訊息---》接受訊息---》伺服器配置 //1 傳送訊息（接受回覆訊息） public class SenderMessageService { //釋出指定訊息到指定地址(在釋出之前，建議將訊息儲存到資料庫) public void publish(St

Koa與Node.js開發實戰（3）——Nunjucks模板在Koa中的應用（視訊演示）

技術架構：在Koa中應用Nunjucks，需要先把Nunjucks整合為符合Koa規格的中介軟體（Middleware），從本質上來講，整合後的中介軟體的作用是給上下文物件繫結一個render(view, model)方法，這樣，後面的Controller就可以呼叫這個方法來渲染模板

JS中離線應用與客戶端存儲

close 行修改 user n) unset 對象存儲空間 ext main ror 1.離線檢測：H5定義了navigator.online屬性，為true 表示設備能上網還定義了兩個相關事件：online和offline 2 數據存儲 cookie——HTTP c

關於JS中原型鏈中的prototype與_proto_的個人理解與詳細總結

轉載自：https://www.cnblogs.com/az96/p/6014621.html 一直認為原型鏈太過複雜，尤其看過某圖後被繞暈了一整子，今天清理硬碟空間（渣電腦），偶然又看到這圖，勾起了點回憶，於是索性複習一下原型鏈相關的內容，表達能力欠缺邏輯混亂別見怪（為了防止新人__（此處指我）__被在此

EM演算法在高斯混合模型中的應用（詳細解釋與求解）

1、高斯混合模型GMM 是指具有以下概率分佈的模型： P ( y

有表頭行與無表頭行的內表在模組化中的應用（ABAP）

PROGRAM SAPMZTST. TYPES: BEGIN OF LINE, COL1 TYPE I, COL2 TYPE I, END OF LINE. DATA: ITAB TYPE LINE OCCURS 10 WI

JS中的原型應用（繼承與擴充套件）

JS中的原型

建立一個屬於自己的庫檔案（Sojourn.js）

在HTML中使用Sojourn.js

相關推薦