原型以及原型鏈的學習隨筆

来源:https://www.cnblogs.com/Anderson-An/archive/2018/11/11/9942805.html
-Advertisement-
Play Games

一 原型: 1 定義:原型是function對像的一個屬性,他定義了構造函數製造出的對象的公共祖先; 通過該構造函數產生的對象,可以繼承該原型的屬性和方法。 原型也是對像。prototype; Person.prototype.name = 'jams'; function Person(){ } ...



一 原型: 

1 定義:原型是function對像的一個屬性,他定義了構造函數製造出的對象的公共祖先;

通過該構造函數產生的對象,可以繼承該原型的屬性和方法。

原型也是對像。prototype;

Person.prototype.name = 'jams';

function Person(){

 

}

var person = new Person();

當列印:console.log(person.name)時,會先從函數中找看下有沒有這個屬性值,如果沒有就去原型prototype中找;

因此,這時候列印出來的值為:jams 

prototype 是函數對象預設的屬性,可以增刪改查; 

 

2 利用原型特點和概念,可以提取共有屬性;

3對象如何查看原型——>隱式屬性:__proto__

  __proto__ 中存放的就是構造函數的原型

相當於:在函數中隱藏了一段代碼: var  this = {

__proto__: Person.prototype

  舉個例子:

var obj = { name: 'a'}

var obj1 = obj;

 obj = {name : 'b'}

console.log(obj1.name);// 輸出的值為 a 

console.log(obj.name);// 輸出的值為 b 
  對比:

  var obj = { name: 'a'}

var obj1 = obj;

   obj.name ='b'

console.log(obj1.name);// 輸出的值為 b 

console.log(obj.name);// 輸出的值為 b 

 

  原因: 當你修改obj.name 時,修改的是原型中的值,當你重新附值給obj時(obj={name:'b'}),相當於重新定義了obj這個變數;

換個理解方式為,obj.name 是一個指針,而obj 是一個變數; 

 

 

 

4 對象如何查看對象的構造函數:constructor;

constructor 是預設自帶的一個屬性,他的值指向原函數;

二 原型鏈: 

1如何構成原型鏈: 一級一級往上找;

 舉個慄子: 

 Grand.prototype.lastName = 'a';

function Grand(){

  var grand = new Grand();

 

Father.prototype = grand;

function Father() {

this.name =  ' b '; 

var father = new Father(); 

 

  Son.prototype = father;

function Son(){

this.hobbit = 'smoke';

 

}

var son = new Son(); 

 

  console.log( son.name );  // b

console.log(son.lastName); // a

 

  2 原型鏈上屬性的增刪改查:跟原型上的增刪改查基本一致,其中刪除:delete 只能通過原型prototype 才能刪除原型的值;

 

 

Person.prototype = {

name = 'a',

sayName : function(){

  console.log(this.name);

}

function Person(){ 

  this.name = 'b';

  var person = new Person();

  sayName 裡面的this指向是,誰調用的這個方法,this指向誰;

  所以最終結果person.sayName() 的值為b

而Person.prototype.sayName() 的值為a 

 

  3絕大多數對象的最終都會繼承自Object.prototype

但不是所有的對象都可以繼承,特例:Object.creat()原型;

例如:object.creat(null) ,該對象沒有prototype原型;

 

4原型鏈的重寫:

例如常見的如下原型鏈就是經常被重寫試用的,當然自己定義的原型同樣也是可以被重寫 

Object.prototype.toString

Number.prototype.toString

Array.prototype.toString

Boolean.prototype.toString

String.prototype.toString 

 

(題外話:JS 有個小bug:

控制台運算:0.14*100,去看下運算結果: 14.000000000000002  這是js精度不准問題導致的;

 解決方法:小數先乘以100然後向下取整或向上取整。如果利用保留兩位有效數字的方法toFixed()再乘以100是不准確的;

math.random() 會產生一個(0,1)的隨機數 

toFixed() 保留兩位有效數字 

Math.tofloor() 向下取整

Math.toceil() 向上取整; 

 

var num =Math.tofloor(Math.random()*1000);  // 獲取0-100的隨機數;

 ) 

 

 

三 call、apply

 call、apply的作用:可以藉助別人的函數實現自己的功能 

call 可以該表this指向

例如:

function Person(name,age){

 //this == obj;

this.name = name;

this.age = age; 

var person = new Person( 'a' ,100);

var obj = {}

 

Person.call(obj, 'b' ,300);

 這句話的意思就是調用Person的方法,然後將相關值附值給obj,使得obj有相關參數屬性值;

 執行結果:obj

 

{name: "b", age: 300}

這樣的好處,借用Person的方法來封裝了obj; 

 

例如:

function Person(name,age,sex){

this.name  =  name;

this.age = age;

this.sex = sex; 

function otherInformation(tel,grade){

this.tel = tel;

 

this.grade = grade; 

function Student(name,age,sex,tel,grade) {

Person.call(this,name,age,sex);


otherInformation.call(this,tel,grade)

}

var student = new Student('asd',123,'male',129,2018) ;

 

 輸出結果:

Student {name: "asd", age: 123, sex: "male", tel: 129, grade: 2018}

 

call與apply的區別:後面傳的參數形式(或者傳參列表)不同; 

apply 只能傳兩個參數,一個是this,另一個是數組,例如: Person.apply(this,[name,age,sex]);

 

 

 

轉載請註明出處

 

 

 

 

 



您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 因為大數據前景好,薪資高,很多人想通過參加學習大數據,然後進入大數據行業發展。但是因為大數據的門檻較高,對於學習人員有一定的要求,那麼學習大數據需要什麼基礎知識呢? 首先我們瞭解下對於大數據學習者本身的學歷水平的要求 目前大多數的機構,對於大數據學習者要求必須是大專學歷以上,而且大專學歷還要求是計算 ...
  • 本書是MySQL 領域的經典之作,擁有廣泛的影響力。第3 版更新了大量的內容,不但涵蓋了最新MySQL5.5版本的新特性,也講述了關於固態盤、高可擴展性設計和雲計算環境下的資料庫相關的新內容,原有的基準測試和性能優化部分也做了大量的擴展和補充。全書共分為16章和6 個附錄,內容涵蓋MySQL架構和歷... ...
  • 學無止境,精益求精! 十年河東,十年河西,莫欺少年窮! 學歷代表你的過去,能力代表你的現在,學習代表你的將來! 本篇博客是轉發的別人的,原文地址:http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html 很久沒寫博客了,都是工作太忙鬧的, ...
  • source map 用來調試打包後的代碼 ...
  • 管理html的bundle依賴 html webpack plugin可以自動給html添加bundle文件 清理dist文件夾 ...
  • 載入Css webpack並不能處理js以外的靜態資源,通過loader來支持他們 載入圖片 file loader可以處理圖片資源,字體資源 載入數據 ...
  • 文章目錄 html代碼用JS動態載入進頁面 JS判斷用戶訪問的是PC還是mobile或者微信瀏覽器 判斷瀏覽器的簡單有效方法 點擊某個div區域之外,隱藏該div 如何在手機上禁止瀏覽器的網頁滾動 改變type=file預設樣式,"瀏覽"等字體 js使用console.time列印代碼執行時間 js ...
  • 1、js動態設置html的字體大小 設計稿寬度750px,設備寬度350px,此時HTML 的font-size:50px,及1rem=50px; 假設一元素在設計稿上寬度為750px,750/100=7.5rem(7.5*50=375px)。 計算方法:設計稿的尺寸 / 100 = XXX rem ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...