后盾人JS -- 原型

沒有原型的對象

也有沒有原型的對象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let xj = {name:"向軍"}console.log(xj)console.log(xj.hasOwnProperty("name"))//完全數據字典對象let hd = Object.create(null,{name:{value:"后盾人"}}) console.log(hd.hasOwnProperty("name"))</script>
</body>
</html>

原型和對象優先級

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = {show(){console.log("后盾人")}}hd.__proto__.render = function(){}hd.render()</script>
</body>
</html>

函數有多個長輩

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>console.log(User)User.prototype.show = function(){console.log("后盾人")}let hd = new User()console.log(User.prototype == hd.__proto__)console.log(hd)function User(){}User.__proto__.view = function(){console.log('User function view method')}
</script>
</body>
</html>

原型關系詳解與屬性繼承實例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = new Object()hd.name = "后盾人"Object.prototype.show= function(){console.log("houdunren")}function User(){}console.dir(User)console.log(User.prototype.__proto__ == User.__proto__.__proto__)console.dir(Object.prototype)</script>
</body>
</html>

系統構造函數的原型體現

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = {}    //Objectconsole.log(hd.__proto__ == Object.prototype)let arr = []console.log(arr.__proto__ == Array.prototype)let str = ""console.log(str.__proto__ == String.prototype)</script>
</body>
</html>

自定義對象的原型設置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = {name:"hd"}let parent = {name:"parent",show(){console.log('partent method' + this.name)}} Object.setPrototypeOf(hd,parent)    //認爹console.log(Object.getPrototypeOf(hd))</script>
</body>
</html>

原型中的constructor引用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function User(name){this.name = name}console.dir(User)console.log(User.prototype.__proto__)console.log(User.prototype.constructor == User)let lisi = new User.prototype.constructor("李四")console.log(lisi)</script>
</body>
</html>

對象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function User(name){this.name = namethis.show = function(){console.log(this.name)}}let hd = new User("后盾人")console.log(hd)function createByObject(obj,...args){const constructor = Object.getPrototypeOf(obj).constructorreturn new constructor(...args)}let xj = createByObject(hd,"向軍")xj.show()
</script>
</body>
</html>

原型鏈檢測

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let a = {}let b = {}console.log(b.__proto__.isPrototypeOf(a))Object.setPrototypeOf(a,b)      //b是a爹console.log(b.isPrototypeOf(a))</script>
</body>
</html>

屬性檢測差異

修改?Object.prototype?會對所有對象產生影響，因為所有對象都繼承自?Object.prototype

?

?in會檢測當前對象和原型鏈

hasOwnProperty只檢測當前對象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let a = {url:"houdunren"}let b = {name:"后盾人"}console.log("url" in a)Object.prototype.web = "hdcms.com"console.log("web" in a)Object.setPrototypeOf(a,b)console.log("name" in  a)console.log(a.hasOwnProperty("url"))</script>
</body>
</html>

借用原型鏈

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = {data:[1,2,3,4,5]}Object.setPrototypeOf(hd,{max(){return this.data.sort((a,b)=>b-a)[0]}})console.log(hd.max())let xj = {lessons:{js:87,php:63,node:99,linux:88},get data(){return Object.values(this.lessons)}}console.log(hd.max.apply(xj))</script>
</body>
</html>

優化方法借用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = {data:[1,2,3,4,5]}console.log(Math.max.call(null,...hd.data))let xj = {lessons:{js:87,php:63,node:99,linux:88},}console.log(Math.max.apply(null,Object.values(xj.lessons)))</script>
</body>
</html>

DOM結點借用Array原型方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button message="后盾人" class="red">后盾人</button><button message="hdcms">hdcms</button><script>let arr = [1,3,43]let res = arr.filter(item => {return item > 39})console.log(arr.filter)console.log(res)let btns = document.querySelectorAll("button")console.log(btns.filter)btns = Array.prototype.filter.call(btns,item=>{return item.hasAttribute("class")})console.log(btns[0].innerHTML)</script>
</body>
</html>

this和原型沒關系

this和原型是沒有關系的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = {name:"后盾人",show(){console.log(this.name)}}let User = {name:'向軍'}Object.setPrototypeOf(hd,{})console.log(hd.show())</script>
</body>
</html>

使用原型最好用get，set這種方法

__proto__嚴格意義上不算屬性，有getter和setter

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

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

相關文章

洛谷 P1130 紅牌 C語言

洛谷 P1130 紅牌 C語言

題目描述 某地臨時居民想獲得長期居住權就必須申請拿到紅牌。獲得紅牌的過程是相當復雜&#xff0c;一共包括 N 個步驟。每一步驟都由政府的某個工作人員負責檢查你所提交的材料是否符合條件。為了加快進程&#xff0c;每一步政府都派了 M 個工作人員來檢查材料。不幸的是&…
閱讀更多...
【線程】基于環形隊列的生產者消費者模型

【線程】基于環形隊列的生產者消費者模型

1 環形隊列 環形隊列采用數組來模擬&#xff0c;用取模運算來模擬環狀特性。 1.如何判斷環形隊列為空或者為滿? 當環形隊列為空時&#xff0c;頭和尾都指向同一個位置。當環形隊列為滿時&#xff0c;頭和尾也都指向同一個位置。 因此&#xff0c; 可以通過加計數器或者標記…
閱讀更多...
二分/雙指針/單調棧隊列專題

二分/雙指針/單調棧隊列專題

1.4924. 矩陣 - AcWing題庫 一開始打表找規律以為是右上角向左下角遞增,但當n很大的時候就不對了,因此我們得去觀察 i * i 100000 * (i - j) j * j i * j 這個式子,我們關心的是這個式子的單調性因此我們可以分別將i和j看作常數來對式子進行求導,可以得到 f(i) 2 * i 10…
閱讀更多...
Shell $0

Shell $0

個人博客地址&#xff1a;Shell $0 | 一張假鈔的真實世界 我們已經知道在Shell中$0表示Shell腳本的文件名&#xff0c;但在有腳本調用的情形中&#xff0c;子腳本中的$0會是什么值呢&#xff1f;我們通過下面的實例來看。 已測試系統列表&#xff1a; Mac OS X EI Capitan 1…
閱讀更多...
商品列表及商品詳情展示

商品列表及商品詳情展示

前言 本文將展示一段結合 HTML、CSS 和 JavaScript 的代碼&#xff0c;實現了一個簡單的商品展示頁面及商品詳情&#xff0c;涵蓋數據獲取、渲染、搜索及排序等功能。 效果展示 點擊不同的商品會展示對應的商品詳情。 代碼部分 代碼總體實現 <!DOCTYPE html> <htm…
閱讀更多...
[ VS Code 插件開發 ] 使用 Task ( 任務 ) 代替 createTerminal (終端) 來執行命令

[ VS Code 插件開發 ] 使用 Task ( 任務 ) 代替 createTerminal (終端) 來執行命令

VSCode 官方自己的插件就是這樣執行命令的. 使用體驗 比 默認的終端 好太多了. 重用終端, Shell 集成 , 按任意鍵關閉, 任務是否成功, 左側命令操作 (菜單中功能很多) 等 import * as vscode from vscode; // 執行的命令 let command_str "npm run dev" // 工作目…
閱讀更多...
大模型綜述一鏡到底（全文八萬字） ——《Large Language Models: A Survey》

大模型綜述一鏡到底（全文八萬字） ——《Large Language Models: A Survey》

論文鏈接&#xff1a;https://arxiv.org/abs/2402.06196 摘要&#xff1a;自2022年11月ChatGPT發布以來&#xff0c;大語言模型&#xff08;LLMs&#xff09;因其在廣泛的自然語言任務上的強大性能而備受關注。正如縮放定律所預測的那樣&#xff0c;大語言模型通過在大量文本數…
閱讀更多...
Python處理數據庫：MySQL與SQLite詳解

Python處理數據庫：MySQL與SQLite詳解

Python處理數據庫&#xff1a;MySQL與SQLite詳解 在數據處理和存儲方面&#xff0c;數據庫扮演著至關重要的角色。Python提供了多種與數據庫交互的方式&#xff0c;其中pymysql庫用于連接和操作MySQL數據庫&#xff0c;而SQLite則是一種輕量級的嵌入式數據庫&#xff0c;Pytho…
閱讀更多...
【C++】B2124 判斷字符串是否為回文

【C++】B2124 判斷字符串是否為回文

博客主頁&#xff1a; [小????????] 本文專欄: C 文章目錄 &#x1f4af;前言&#x1f4af;題目描述輸入格式&#xff1a;輸出格式&#xff1a;樣例&#xff1a; &#x1f4af;方法一&#xff1a;我的第一種做法思路代碼實現解析 &#x1f4af;方法二&#xff1a;我…
閱讀更多...
ubuntuCUDA安裝

ubuntuCUDA安裝

系列文章目錄 移動硬盤制作Ubuntu系統盤 前言 根據前篇“移動硬盤制作Ubuntu系統盤”安裝系統后&#xff0c;還不能夠使用顯卡。 如果需要使用顯卡&#xff0c;還需要進行相關驅動的安裝&#xff08;如使用的為Nvidia顯卡&#xff0c;就需要安裝相關的Nvidia顯卡驅動&#xff…
閱讀更多...
Selenium 使用指南：從入門到精通

Selenium 使用指南：從入門到精通

Selenium 使用指南&#xff1a;從入門到精通 Selenium 是一個用于自動化 Web 瀏覽器操作的強大工具&#xff0c;廣泛應用于自動化測試和 Web 數據爬取中。本文將帶你從入門到精通地掌握 Selenium&#xff0c;涵蓋其基本操作、常用用法以及一個完整的圖片爬取示例。 1. 環境配…
閱讀更多...
Sqoop導入MySQL中含有回車換行符的數據

Sqoop導入MySQL中含有回車換行符的數據

個人博客地址&#xff1a;Sqoop導入MySQL中含有回車換行符的數據 MySQL中的數據如下圖&#xff1a; 檢查HDFS上的目標文件內容可以看出&#xff0c;回車換行符位置的數據被截斷了&#xff0c;導致數據列錯位。 Sqoop提供了配置參數&#xff0c;在導入時丟棄掉數據的分隔符&…
閱讀更多...
利用matlab尋找矩陣中最大值及其位置

利用matlab尋找矩陣中最大值及其位置

目錄 一、問題描述1.1 max函數用法1.2 MATLAB中 : : :的作用1.3 ind2sub函數用法 二、實現方法2.1 方法一&#xff1a;max和find2.2 方法二&#xff1a;max和ind2sub2.3 方法對比 三、參考文獻 一、問題描述 matlab中求最大值可使用函數max&#xff0c;對于一維向量&#xff0…
閱讀更多...
PyTorch數據建模

PyTorch數據建模

回歸分析 import torch import numpy as np import pandas as pd from torch.utils.data import DataLoader,TensorDataset import time strat = time.perf_counter()
閱讀更多...
機試題——字符匹配

機試題——字符匹配

題目描述 給你一個字符串數組&#xff08;每個字符串均由小寫字母組成&#xff09;和一個字符規律&#xff08;由小寫字母和 . 和 * 組成&#xff09;&#xff0c;識別數組中哪些字符串可以匹配到字符規律上。 . 匹配任意單個字符。* 匹配零個或多個前面的那一個元素。 所謂…
閱讀更多...
《 C++ 點滴漫談： 二十五 》空指針，隱秘而危險的殺手：程序崩潰的真兇就在你眼前！

《 C++ 點滴漫談： 二十五 》空指針，隱秘而危險的殺手：程序崩潰的真兇就在你眼前！

摘要 本博客全面解析了 C 中指針與空值的相關知識&#xff0c;從基礎概念到現代 C 的改進展開&#xff0c;涵蓋了空指針的定義、表示方式、使用場景以及常見注意事項。同時&#xff0c;深入探討了 nullptr 的引入及智能指針在提升代碼安全性和簡化內存管理方面的優勢。通過實際…
閱讀更多...
git push到遠程倉庫時無法推送大文件

git push到遠程倉庫時無法推送大文件

一、錯誤 remote: Error: Deny by project hooks setting ‘default’: size of the file ‘scientific_calculator’, is 164 MiB, which has exceeded the limited size (100 MiB) in commit ‘4c91b7e3a04b8034892414d649860bf12416b614’. 二、原因 本地提交過大文件&am…
閱讀更多...
掌握API和控制點(從Java到JNI接口)_36 JNI開發與NDK 04

掌握API和控制點(從Java到JNI接口)_36 JNI開發與NDK 04

4、 *.so的入口函數&#xff1a;JNI_OnLoad() VM (virtual machine)的角色 Java代碼在VM上執行。在執行Java代碼的過程中&#xff0c;如果Java需要與本地代碼(*.so)溝通時&#xff0c; VM就會把*.so視為插件<Tn>而加載到VM里。然后讓Java函數呼叫到這插件<Tn>里的…
閱讀更多...
Windows圖形界面(GUI)-QT-C/C++ - QT Tab Widget

Windows圖形界面(GUI)-QT-C/C++ - QT Tab Widget

公開視頻 -> 鏈接點擊跳轉公開課程博客首頁 -> ???鏈接點擊跳轉博客主頁 目錄 一、概述 1.1 什么是 QTabWidget&#xff1f; 1.2 使用場景 二、常見樣式 2.1 選項卡式界面 2.2 動態添加和刪除選項卡 2.3 自定義選項卡標題和圖標 三、屬性設置 3.1 添加頁面&…
閱讀更多...
[MRCTF2020]Ez_bypass1(md5繞過)

[MRCTF2020]Ez_bypass1(md5繞過)

[MRCTF2020]Ez_bypass1(md5繞過) ?? 這道題就是要繞過md5強類型比較&#xff0c;但是本身又不相等&#xff1a; md5無法處理數組&#xff0c;如果傳入的是數組進行md5加密&#xff0c;會直接放回NULL&#xff0c;兩個NuLL相比較會等于true&#xff1b; 所以?id[]1&gg…
閱讀更多...
最新文章

Copyright @ 2022~2023