ES5-拓展 原型鏈、繼承、類

Symbol不是構造函數
Object不是原型是實例對象 他的構造器繼承原型上的構造器
undefined是未定義 null是空指針

一、原型鏈

1. 函數也是實例對象

在這里插入圖片描述

2. 構造函數Object是由Function構造出來的

在這里插入圖片描述
在這里插入圖片描述

3. 有一種說法是,原型鏈的終點是null

Object.prototype.__proto__指向null

4. 總結

Foo.__proto__ === Function.prototype // true
Object.__proto__ ===  Function.prototype // true
Object.__proto__ ===  Object.prototype // false
Function.prototype.constructor === Function // true
Function.prototype.constructor === Object // false
Object.constructor === Object // false
Object.constructor === Function// true
Function.__proto__ ===  Function.prototype // true
Function.prototype.__proto__ ===  Object.prototype // true

二、繼承

1. 原型鏈繼承,引用值共享

function Super() {this.a = [1, 2, 3]
}
function Sub() { }
Sub.prototype = new Super()
var sub1 = new Sub()
var sub2 = new Sub()
sub1.a = '123'console.log('sub1.a', sub1, sub1.a) // 123 改的是實例
console.log('sub2.a', sub2, sub2.a) // [1,2,3]

在這里插入圖片描述

function Super() {this.a = [1, 2, 3]
}
function Sub() { }
Sub.prototype = new Super()
var sub1 = new Sub()
var sub2 = new Sub()sub1.a.push(4) // 改的是原型
console.log('sub1.a', sub1, sub1.a) // [1,2,3,4]
console.log('sub2.a', sub2, sub2.a) // [1,2,3,4]

在這里插入圖片描述

2. 借用構造函數,父類原型方法無法獲取

  • 在子類內部call超類的構造函數

3. 組合繼承(偽經典繼承) 1+2 ,構造函數執行了2次

4. 組合繼承優化 Object.create是es5的寫法

在這里插入圖片描述

5. 寄生組合繼承(經典繼承)YUI

  • Object.create兼容性寫法,會重寫Sub的prototype
    在這里插入圖片描述
  • 如果Sub.prototype = Object.create…語句前,Sub的prototype上定義了方法屬性,則這樣賦值會丟失原先的方法屬性
  • 所有繼承方式都不能解決這個問題,包括圣杯。那就賦值完再定義
  • ES6的類能解決這個問題
    在這里插入圖片描述

6. 圣杯

在這里插入圖片描述

7. 拷貝繼承(不常用)

三、類 ES6 class繼承

  1. 解決引用值共享
  2. 子類、父類的方法可訪問
    在這里插入圖片描述
  3. es6 寫法
    在這里插入圖片描述
    在這里插入圖片描述
    在這里插入圖片描述

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/251073.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/251073.shtml
英文地址,請注明出處:http://en.pswp.cn/news/251073.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Mysql中各種與字符編碼集(character_set)有關的變量含義

mysql涉及到各種字符集,在此做一個總結。 字符集的設置是通過環境變量來設置的,環境變量和linux中的環境變量是一個意思。mysql的環境變量分為兩種:session和global。session變量是僅在這次會話紅中有效,在mysql中,一次…

spring boot 加載application配置文件

這就要注意了 轉載于:https://www.cnblogs.com/huochaihe/p/9397849.html

javascript --- 防抖與節流

先做一個監聽鼠標移動的base: <style>#content{height:150px;width:200px;text-align:center;color:#fff;background-color:#ccc;font-size: 70px;} </style> <div id"content"></div> <script>let content document.getElementById…

DOM-9 【實戰】模塊化開發Todolist(面向過程)

模塊化分類 按dom結構劃分按功能劃分&#xff08;組件化開發&#xff09; 模塊與模塊之間可以相互依賴&#xff0c;但互不影響 模塊&#xff1a;IIFE賦值給一個變量&#xff0c;當引入模塊時&#xff0c;IIFE會立即執行 單標簽閉合才符合W3C規范display、position放在上面css是…

mysql在linux下的安裝(5.7版本以后)

1.添加mysql組和mysql用戶&#xff0c;用于設置mysql安裝目錄文件所有者和所屬組。 ①groupadd mysql ②useradd -r -g mysql mysql 2.將二進制文件解壓到指定的安裝目錄&#xff0c;通用的/usr/local ①解壓二進制文件&#xff0c; tar -zxvf /usr/local/mysql-5.7.13-linux-…

Kali Linux2018 上安裝open-vm-tools實現虛擬機交互

最新的kali linux2018已經不再支持原有的vmwaretools&#xff0c;即使安裝了也不能實現主機與客戶機之間的交互&#xff08;比如從主機復制文件到客戶機&#xff09;。安裝open-vm-tools替代vm tools能夠完美實現“自動適應客戶機”&#xff08;即自動適應客戶機的分辨率&#…

DOM-11 【兼容】鼠標行為坐標系、pageXY封裝、拖拽函數封裝

鼠標行為 e.屬性含義相關屬性clientX/Y鼠標位置相對于當前可視區域的坐標x/y&#xff08;FF火狐部分版本不支持&#xff09;pageX/Y(IE9以下不支持)鼠標位置相對于當前文檔的坐標layerX/Y (IE11以下同clientX/Y)screenX/Y鼠標位置相對于顯示器屏幕的坐標offsetX/Y鼠標位置相對…

java --replaceAll方法

public void abc(){String str "aabbccdd";str str.replaceAll("\\d","數字")&#xff1b;system.out.println("str"); } 轉載于:https://www.cnblogs.com/gjack/p/8325778.html

mysql分頁優化

一般分頁這樣寫 select * from goods limit 50,20 從50行開始取20行&#xff0c;即第51行到70行 當數據量少當時候這樣并沒有什么問題&#xff0c;但是如果 select * from goods limit 1000000,20 查詢耗時驟升。 這種方式是查詢出100000020行&#xff0c;再取20行&#xff0c;…

DOM-10 面向對象開發Todolist

將插件配置項寫在html的div里&#xff0c;data-config自定義屬性&#xff0c;外單引號&#xff0c;內雙引號&#xff08;內部是JSON字符串&#xff09; <div class"todo-wrap" data-config{"plusBtn":"j-show-input","inputArea":…

計網 --- 域名服務系統:因特網的目錄服務

主機名: // 主機的一種標識方法如: cnn.com www.yahoo.com gaia.cs.umass.edu cis.poly.edu主機名可能由不定長的字母數字組成,路由器難以處理.由于這些原因, 主機也可以使用IP地址(IP address) 進行標識 // 簡略介紹ip地址 // 一個IP地址由4個字節組成,并有著嚴格的層次結構…

Ansible基礎概述

一、Ansible簡介 Ansible基于Python語言實現&#xff0c;由paramiko和PyYAML兩個關鍵模塊構建。Ansible的編排引擎可以出色地完成配置管理&#xff0c;流程控制&#xff0c;資源部署等多方面工作。Ansible公司負責Ansible開源軟件的維護&#xff0c;管理。一般軟件的更新大概每…

selenium瀏覽器驅動下載地址整理

今天把手頭有的一些關于selenium測試的資源整理了一下&#xff0c;分享出來。 1. 所有版本chrome下載 是不是很難找到老版本的chrome&#xff1f;博主收集了幾個下載chrome老版本的網站&#xff0c;其中哪個下載的是原版的就不得而知了。 http://www.slimjet.com/chrome/google…

DOM-12 【模擬桌面待講評】鼠標事件深入、點擊與拖拽分離、雙擊事件

鼠標事件深入 點擊事件 mousedown mouseupposition: absolute 會將內聯元素變為塊級&#xff08;比如a&#xff09;a標簽的協議限定符&#xff08;偽協議&#xff0c;防止跳轉和刷新&#xff0c;讓href不生效&#xff09;&#xff0c;javascript:;&#xff0c;可以讓點擊和拖…

scrapy的操作

轉載于:https://www.cnblogs.com/mengqingjian/p/8337772.html

http --- HTTPS是在安全的傳輸層上發送的HTTP

HTTPS: // HTTPS是最常見的HTTP安全版本 // 是在安全的傳輸層上發送的HTTP// 將HTTP報文發送給TCP之前,先將其發送給了一個安全層(通過SSL協議實現),對其進行加密.然后再發送給TCP // 在服務器端,通過提取商量好的密鑰進行解密HTTPS方案: // 對Web服務器發起請求時,需要有一種…

Devexpress xaf針對某個用戶登錄后在面板中設置導航無效的解決方法

Devexpress xaf框架生成的項目默認情況下導航欄是顯示在左側&#xff0c;有時候我們用某個賬戶登錄后&#xff0c;發現導航欄無法顯示在左側&#xff0c;操作十分不方便。我們可以去數據庫刪除當前登錄用戶的自定義布局 解決方法如下: 1、查詢PermissionPolicyUser用戶表&#…

DOM-13 【實戰】輸入及狀態改變事件、京東搜索框

模塊化 IIFE window.onload function () {init() }function init() {keySearch()others() // 多人開發的模塊 }var keySearch (function () {var searchKw document.getElementById(J_search_kw),autoKw document.getElementById(J_autoKw),recomKw JSON.parse(document…

吳恩達“機器學習”——學習筆記二

定義一些名詞 欠擬合&#xff08;underfitting&#xff09;&#xff1a;數據中的某些成分未被捕獲到&#xff0c;比如擬合結果是二次函數&#xff0c;結果才只擬合出了一次函數。 過擬合&#xff08;overfitting&#xff09;&#xff1a;使用過量的特征集合&#xff0c;使模型過…

Http 概述

Http是可靠的數據傳輸協議。資源Web服務器是Web資源&#xff08;resource&#xff09;的宿主。包括靜態文件以及動態的內容。 媒體類型Http對每種需要由web傳輸的對象都打上了名為MIME類型的數據格式標簽。主要的mime類型: text/htmltext/plainimage/jpegimage/gifvideo/quickt…