前端關於this

来源:https://www.cnblogs.com/cjx-web/archive/2018/07/30/9389747.html
-Advertisement-
Play Games

1>對於有經驗得JavaScript開發者來說this也是一個非常難以理解的複雜機制,在此簡單分析一下 this的指向在函數的定義的時候是確定不了的,只有在函數執行的時候才能確定指向誰,實際上this最終指向的是調用他的那個對象(運行時) 2>搞清楚js裡面,函數的集中調用方法 總結:誰調用了這個函 ...


1>對於有經驗得JavaScript開發者來說this也是一個非常難以理解的複雜機制,在此簡單分析一下

      this的指向在函數的定義的時候是確定不了的,只有在函數執行的時候才能確定指向誰,實際上this最終指向的是調用他的那個對象(運行時)

2>搞清楚js裡面,函數的集中調用方法

  1. 普通函數調用
  2. 作為方法調用
  3. 作為構造函數調用
  4. 使用apply/call方法調用
  5. function.prototype.bind調用
  6. es6箭頭函數調用

 總結:誰調用了這個函數或者方法this關鍵字就是指向誰的

 

 

 

分情況討論

1>普通函數調用

function sayName() {
    this.name='kobe';
    console.log(this);
    console.log(this.name);
}
sayName();   //window  kobe

這段代碼sayName函數作為普通函數調用,實際上作為全局對象Window的一個方法調用的,window.sayName();

 

2>方法調用

var name='kobe';
var person={
    name:'james',
    sayName:function () {
        console.log(this.name);
    }
}

person.sayName();

var person1=person.sayName;
person1();

3>構造函數調用

function  Person(name){
        this.name=name;
    }
    var personA=Person("xl");   
    console.log(personA.name); // 輸出  undefined
    console.log(window.name);//輸出  xl
    //上面代碼沒有進行new操作,相當於window對象調用Person("xl")方法,那麼this指向window對象,併進行賦值操作window.name="xl".
    
    var personB=new Person("xl");
    console.log(personB.name);// 輸出 xl
    //這部分代碼的解釋見下

4>apply/ca調用

apply和call方法可用來代替另一個對象調用一個方法,call方法可將一個函數的對象上下文從初始的上下文改變為指定為新的對象,不同的是就是兩個方法的參數是不一樣的

var obj={
    x:3,
    show:function () {
        console.log('method is called:'+this.x);
    }
}

var obj2={x:4};
obj.show();
obj.show.apply(obj2);
obj.show.call(obj2);

 


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

-Advertisement-
Play Games
更多相關文章
  • 23:01:17 react腳手架搭建 (個人用的是webstorm,所以分享下webstorm中的創建react腳手架項目的方法) 1.創建新項目(前提是下載nodejs環境) 2.下載好在webstorm中右鍵自己創建的項目目錄,菜單中會出現一個命令行工具,點進去 然後 npm start 開啟 ...
  • 1.react 組件創建 首先要引入以下三個庫: react.min.js - React 的核心庫 react-dom.min.js - 提供與 DOM 相關的功能 babel.min.js - Babel 可以將 ES6 代碼轉為 ES5 代碼,這樣我們就能在目前不支持 ES6 瀏覽器上執行 R ...
  • 表格 表格由 <table> 標簽來定義。 每個表格均有若幹行(由 <tr> 標簽定義),每行被分割為若幹單元格(由 <td> 標簽定義)。 字母 td 指表格數據(table data),即數據單元格的內容。 數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。 例如,要畫出如下表格 ...
  • [1]概述 [2]圖像資源 [3]預製資源 [4]圖集資源 [5]藝術數字資源 [6]字體資源 ...
  • 最近在開發Cesium的項目,每次一打開瀏覽器渲染3D 模型。風扇就狂飆起來,進任務管理器查看發現集顯使用率100%,獨顯使用率0%。使用的是集顯進行渲染。怪不得風扇會飆起來。既然知道問題所在,解決的辦法就很簡單了,將瀏覽器設置為使用獨顯就可以了。 具體設置方法可以去各種搜索引擎上搜索。百度經驗裡面 ...
  • 1 >new生成一個對象的過程 2>請簡單說明什麼是事件冒泡和事件捕獲以及事件委托 IE事件流叫作事件冒泡,即是事件開始有最具體的元素(文檔中嵌套最深的那個節點)接受,然後逐級向上傳播較為不具體的的節點 element(div)>element(body)>element(html)>Documen ...
  • 最近在使用這個插件的過程中發現一個bug: 不支持 含有小數的形式。 查看源碼後,修改了下其中的正則,使其支持小數形式(66.66px、.6px )。 作者的源碼最近一次更新都在兩年前,所以就簡單的記錄下 插件地址:https://www.npmjs.com/package/gulp-px2rem- ...
  • 同步請求:發送方發送數據包後,等待接收方發迴響應之後,才能發送下一個數據包的通信方式。 非同步請求:發送方發送數據包後,不用等待接收方發迴響應,就可以發送下一個數據包的通信方式。 同步通信:要求通信雙方在相同的時鐘頻率下,並且準確協調,是通過共用單個時鐘或定時脈衝源來保證雙方準確同步,效率高。 非同步通 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...