JavaScript中的this關鍵字的用法和注意點
JavaScript中的this關鍵字的用法和注意點
一、this關鍵字的用法
this一般用於指向物件(繫結物件);
01、在普通函式呼叫中，其內部的this指向全域性物件(window);
function funcName(){this.name = 'Jack';console.log(this);// Window}funcName();console.log(window.name);// Jackconsole.log(this.name);// Jack
上述程式碼先宣告一個函式名為funcName的函式，給函式內部的物件新增屬性name,並列印this的指向(window)
02、在建構函式呼叫中，其內部的this指向新建立的物件
function Person() {this.name = '郭嘉';console.log(this);// Person {name: "郭嘉"}}var p1 = new Person();console.log(p1.name); // 郭嘉console.log(window.name);// 空
上述程式碼先宣告一個函式名為Person的建構函式，給建構函式內部的物件新增屬性name,並列印
補充：使用new關鍵字建立建構函式的例項物件的系統內部流程
/*用new關鍵字建立建構函式的例項的系統內部流程*///001
使用new
關鍵字在內部預設建立一個物件//002
在建構函式內部,把預設建立的物件賦值給this//003
通過this來設定物件的屬性和方法//004
預設把新建立的物件返回給我們
03、在物件的方法呼叫中，其內部的this指向呼叫的物件本身
//以物件的方法來進行呼叫var obj = {name:"張三", // 物件的屬性getName:function () { // 物件的方法console.log(this);// Object {name: "張三"}}};obj.getName();// 物件的方法呼叫console.log(obj.name); // 張三console.log(window.name);// 空
上述程式碼先宣告一個物件名為obj的物件，給物件新增屬性name,和方法getName,並在方法內部列印this的指向(物件本身：Object {name: "張三"}),呼叫物件的方法,列印this的指向是物件本身(Object {name: "張三"})而不是全域性物件(window);
04、在事件處理中，其內部的this指向產生這個事件源的物件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><button id='btn'>click</button><script>var btn = document.getElementById('btn');// 獲取id為btn的標籤btn.onclick = function () {// 按鈕點選事件console.log(this);
// <button id='btn'>click</button>};</script></body></html>
上述程式碼先用html建立一個按鈕，再給這個按鈕新增一個點選事件，並列印this的指向(<button id =”btn”>click</button>),得出結論是this指向產生事件源的物件(<button id =”btn”>click</button>);
05、在定時器中其內部的this指標指向window物件
function Person() {// 備份指標console.log(this); // Person {}var self = this;setInterval(function () {console.log(self);// Person {}console.log(this);// Window}, 20);}new Person();
上述程式碼先建立一個person函式，再用self來備份一下this指標，再建立定時器，定時器內部的this永遠指標指向window物件，有時候我們我們要用到指定的物件不是window物件，我們可以通過備份指標來實現；
06、通過call或者apply方式呼叫中(函式上下文),this指向的是當前的上下文，主要是改變this的指向
call方法: 傳入的引數數量不固定
第一個引數是要繫結給this的值(即函式體內this物件的指向)
第二個引數開始往後,每個引數都依次的傳入作為函式的引數
apply: 接收兩個引數
第一個引數是要繫結給this的值(即函式體內this物件的指向)
第二個就是一個引數陣列
function Person() {this.name = 'Jack';}function Boy() {Person.call(this);console.log(this);// Boy {name: "Jack"}}var b1 = new Boy();
上述程式碼建立兩個建構函式Person和Boy，使用call方法讓Person建構函式中的this指向Boy建構函式，相當於把Person建構函式內物件的屬性和方法深拷貝一份(包括引用型別：指標和堆空間的資料)
var obj = {name:"張三",getName:function (param1,param2) {console.log(this.name,param1,param2); }}obj.getName("123","456"); //張三 123 456var obj2 = {name:"李四"};obj.getName.call(obj2); //列印李四 undefined undefinedobj.getName.call(obj2,"測試字串01","測試的字串02"); // 李四 測試字串01 測試的字串02obj.getName.apply(obj2,["123","456"]); // 李四 123 456
上述程式碼先建立一個物件obj並新增屬性name和方法getName,呼叫自身的方法得出的結果(張三 123 456),再建立一個物件obj2,新增屬性name,obj.getName.call(obj2);這句話的意思是obj的方法getName借給obj2使用，其obj方法內部的this指向obj2;得出的結果是李四 undefined(沒有傳參) undefined(沒有傳參)；call方法主要是改變this的指向；apply的方法作用和call一樣，只是傳的引數不一樣，call可以只傳一個引數（要繫結給this的值），也可以傳多個；而apply接收兩個引數（要繫結給this的值，[]）,第二個引數是陣列，陣列的長度不定。
二、this關鍵字用法的注意點
This的丟失問題
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="box"></div><script>var box = document.getElementById('box');// 獲取標籤var getId = document.getElementById;// var box = getId('box');// Uncaught TypeError: Illegal invocation (未捕獲的型別錯誤)console.log(box);</script></body></html>
上述程式碼先在html中建立一個id為box的div，然後再js中獲取標籤，有時候我們嫌獲取標籤的方法太長了，想要縮減一下(var getId = document.getElementById)，再呼叫，然而上述程式碼呼叫時則報錯了！原因是方法內部的this指標丟失了，原先document.getElementById內部實現中用到this指標，其指向document物件，而getId呼叫時是按普通函式呼叫的，其內部的this指標指向window物件，所以執行到這一步的時候報錯！
現在用apply方法來修正this的指向
//借用apply來修正thisdocument.getElementById
=
(function
(func) {return function
() {return
func.apply(
tip:自己收集的一些前端注意事項
1.函式優先
函式宣告和變數宣告都會被提升，但是一個值得注意的細節是函式會首先被提升，然後才是變數
foo();//1
var foo;
function foo(){
console.log(1);
JavaScript中的this關鍵字的用法和注意點
一、this關鍵字的用法
this一般用於指向物件(繫結物件);
01、在普通函式呼叫中，其內部的this指向全域性物件(window);
function
funcName(){this.name
=
屬於 指向 cti 用法 func 生成 純粹 ava 構造函數 this的使用環境有以下幾種
1、純粹的函數調用
純粹的函數調用屬於函數的最常用的用法，屬於全局性調用。在全局函數中，this等於window。
2、作為對象方法的調用
當函數不是全局調用，而是作為某個對象 asc 函數調用 javascrip new spa con oba cti func 1、純粹的函數調用，this就代表全局對象Global
var x = 1;
function test(){
var x = ‘二哈‘;
console.log(th 決定 博客 rip script 答案 搜索 http 環境 return 這是我第二遍學this了，第一遍學的懵懵的。this指哪裏都是憑我一個男人的直覺然後控制臺輸出看看對不對。
剛查了書、博客、視頻。理解差不多了。畢竟菜雞me；
一、首先介紹下什麽是this
JavaScript中this關鍵字用法較為靈活，用處較多，主要有以下幾種方式：
1.瀏覽器中，全域性的this指向window；
console.log(this===window);
console.log(this);
this.a='nice';
console
gitHub地址： 傳送門
工作中遇到的坑和思考
有不同意見歡迎指正交流
前排推薦 https://github.com/topics/javascript 關注JS開源框架動態
勤於總結和思考
1. ajax請求的結果要和後端約定好返回的資料格式。
先來看一個例子：
var obj = {
foo: function () { console.log(this.bar) },
bar: 1
};
var foo = obj.foo;
var bar = 2;
obj.foo() // 1
foo() // 2
造成這種差
首先，瞭解一下this關鍵字。this關鍵字就涉及到函式呼叫的內容。函式的幾種呼叫方式:
普通函式呼叫
作為方法來呼叫
作為建構函式來呼叫
使用apply/call方法來呼叫
Function.prototype.bind方法
ES6箭頭函式
但是不管
面嚮物件語言中 this 表示當前物件的一個引用。 但在 JavaScript 中 this 不是固定不變的，它會隨著執行環境的改變而改變。
1，在方法中，this 表示該方法所屬的物件。 2，如果單獨使用，this 表示全域性物件。 3，在函式中，this 表示全域性物件。 在函式中， 所有的字串類都起源於C語言的字串，而C語言字串則是字元的陣列。C語言中是沒有字串的，只有字元陣列。
談一下C++的字串：C++提供兩種字串的表示：C風格的字串和標準C++引入的string型別。一般建議用string型別，但是實際情況中還是要使用老式C風格的字串。
1.C風格的字串：C
本文帶你瞭解Netty 4.0到Netty 4.1的值得注意的改變和新特性.
題外話
儘管我們儘量保持向下相容，4.1 還是有一些和4.0不完全相容的地方. 請確保使用新的Netty版本重新編譯你的應用.
當你重新編譯你的應用時，你可以能看到一些棄用警告. 請依照修改建議
this的用法可以分為三種
1、對自身的直接引用
表示對自身的直接引用
2、區分重名
當出現重名時，為防止出錯，使用this表示對當前物件的引用
3、引用建構函式
呼叫本類中另一種形式的建構函式
Super
super即超類，指向的是離自己最近的一個父類 它的
在Java中，this通常指當前物件，super則指父類的。當你想要引用當前物件的某種東西，比如當前物件的某個方法，或當前物件的某個成員，你便可以利用this來實現這個目的，當然，this的另一個用途是呼叫當前物件的另一個建構函式，這些馬上就要討論。如果你
本文講解final的基本用法和裡面的優缺點，原創不易，轉載請註明出處
文章分為3部分，分別會給大家介紹final關鍵字對類，方法和變數的修飾所起到的作用，以及一些優點，對於缺點大家可以參考《JAVA程式設計思想》第四版 156頁。
final類及其優點
f blog http tro font return his 局部變量 .com str
this關鍵字主要有三個應用：
1.調用本類中的屬性，也就是類的成員變量；
2.調用本類中的其他方法；
3.調用本類中的其他構造方法，調用時候要放在構造方法的首行。
* this關鍵
為什麼需要非同步載入js檔案：
不使用非同步，文件在載入js程式碼時會阻塞其他資源的下載，導致空白頁面。
（1）置於頂部的js指令碼，瀏覽器在執行時需要花費時間去下載外鏈檔案的程式碼並執行，此時會導致明顯的延遲，顯示為空白頁面，使用者無法瀏覽內容，也無法與頁面進行互動。 （2） mixins基礎概況
vue中的解釋是這樣的，如果覺得語言枯燥的可以自行跳過嘿~
混入 (mixins)： 是一種分發 Vue 元件中可複用功能的非常靈活的方式。混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被混入該元件本身的選項。
怎麼用？
舉個栗子：
定義一個混入
JavaScript中的this含義非常豐富，它可以是全域性物件，當前物件或者是任意物件，這都取決於函式的呼叫方式。函式有以下幾種呼叫方式：作為物件方法呼叫、作為函式呼叫、作為建構函式呼叫、apply或call呼叫。
物件方法呼叫
作為物件方法呼叫的時候，this會被繫結到該物件。
? 原型鏈繼承
原型鏈作為實現繼承的主要方法,其基本思路是利用原型讓一個引用型別繼承另一個引用型別的屬性和方法, 建構函式,原型和例項之間的關係通過一張圖來解釋一下,需要詳細瞭解的可以看一下我的另外一篇文章
JavaScirpt 之原型&原型物件和原型鏈
原型鏈繼承的基本模式如下:
funct 相關推薦
JavaScript中的小技巧和注意點（二）
JavaScript中的this關鍵字的用法和注意點
JavaScript中this的用法
JavaScript中this關鍵字的指向問題
對於JavaScript中this關鍵字的理解
JavaScript中this關鍵字
專案中遇到的坑和注意點 總結 持續更新
JavaScript中this關鍵字原理
JavaScript中this關鍵字改變指向的三種方法（apply、call、bind）
JavaScript中 this 關鍵字
JAVA 和 C/C++ 中 string 的區別和注意點
Netty 4.1中的新變化和注意點
Java中this關鍵字和super關鍵字的使用用法
Java中this關鍵字和super關鍵字的用法
深入java final關鍵字 基本用法、注意點和優點
JAVA中this關鍵字的用法
Javascript中的defer屬性和async屬性的用法
vue中mixins的使用方法和注意點（詳）
javascript中this用法例項詳解
JavaScript之原型鏈繼承&注意點和缺點