javaScript系列[06]-javaScript和this

 1 <script>
 2 console.log(this); //預設指向window
 3  
 4 function sum() {
 5 var res = 0;
 6 for (var i = 0; i < arguments.length; i++) {
 7 res += arguments[i];
 8 }
 9 console.log(this);
10 return res;
11 }
12  
13 //呼叫sum函式的時候，this預設指向window
14 console.log(sum(1, 2, 3, 4)); //計算輸入引數的累加和，結果為10
15 </script>

 1 /**程式碼 [ 01 ]**/
 2 var personOne = {name:"文頂頂",contentText:"天王蓋地虎 小雞燉蘑菇"};
 3 var personTwo = {name:"燕赤霞",contentText:"天地無極 乾坤借法 急急如令令"};
 4  
 5 function speak(obj) {
 6 console.log(obj.name+"口訣是：" + getContentText(obj));;
 7 }
 8  
 9 function getContentText(obj) {
10 return obj.contentText + "噠噠噠噠~";
11 }
12  
13 speak(personOne); //文頂頂口訣是：天王蓋地虎 小雞燉蘑菇噠噠噠噠~
14 speak(personTwo); //燕赤霞口訣是：天地無極 乾坤借法 急急如令令噠噠噠噠~
15  
16 getContentText(personOne);
17 getContentText(personTwo);

 1 /**程式碼 [ 02 ]**/
 2 var personOne = {name:"文頂頂",contentText:"天王蓋地虎 小雞燉蘑菇"};
 3 var personTwo = {name:"燕赤霞",contentText:"天地無極 乾坤借法 急急如令令"};
 4  
 5 function speak() {
 6 console.log(this.name+"口訣是：" + getContentText.call(this));;
 7 }
 8  
 9 function getContentText() {
10 return this.contentText + "噠噠噠噠~";
11 }
12  
13 speak.call(personOne); //文頂頂口訣是：天王蓋地虎 小雞燉蘑菇噠噠噠噠~
14 speak.call(personTwo); //燕赤霞口訣是：天地無極 乾坤借法 急急如令令噠噠噠噠~
15  
16 getContentText.call(personOne); //天王蓋地虎 小雞燉蘑菇噠噠噠噠~
17 getContentText.call(personTwo); //天地無極 乾坤借法 急急如令令噠噠噠噠~

 1 //01 function關鍵字宣告函式
 2 function f1() {
 3 console.log("命名函式|具名函式");
 4 }
 5  
 6 var f2 = function () {
 7 console.log("匿名函式");
 8 }
 9  
10 //02 Function建構函式建立函式例項物件
11 var f3 = new Function(`console.log("函式例項物件的函式體")`);

 1 //[1] 函式的宣告
 2 //01 function關鍵字宣告函式
 3 function f1(a,b) {
 4 //a和b為函式的形式引數，相當於在此處寫上程式碼 var a,b;
 5 console.log("命名函式|具名函式","a的值:" +a , "b的值:"+b);
 6 console.log(this); //此處指向window全域性物件
 7 console.log(arguments); //此處列印的是["f1的a","f1的b"]結構的資料
 8 }
 9  
10 var f2 = function (a,b) {
11 //a和b為函式的形式引數，相當於在此處寫上程式碼 var a,b;
12 console.log("匿名函式","a的值:" +a , "b的值:"+b);
13 }
14  
15 //02 Function建構函式建立函式例項物件
16 //a和b為新建立的函式物件的形式引數
17 var f3 = new Function(`a`,`b`,`console.log("函式例項物件的函式體","a的值:" +a , "b的值:"+b)`);
18  
19  
20 //[2] 函式的呼叫
21  
22 //"f1的a"和"f1的b"這兩個字串作為f1函式此處呼叫傳遞的實際引數
23 //在呼叫函式的時候，會把"f1的a"這個字串賦值給形參a,把"f1的b"這個字串賦值給形參b
24 f1("f1的a","f1的b"); //命名函式|具名函式 a的值:f1的a b的值:f1的b
25  
26 f2("f2的a","f3的b"); //匿名函式 a的值:f2的a b的值:f3的b
27 f3("f3的a","f3的b"); //函式例項物件的函式體 a的值:f3的a b的值:f3的b

 1 function f1() {
 2 console.log("f1");
 3 //當前的函式呼叫棧：f1
 4 f2(); //函式f2呼叫的位置
 5 }
 6  
 7 function f2() {
 8 console.log("f2");
 9 //當前函式呼叫棧:f1 --> f2
10 f3(); //函式f3呼叫的位置
11 }
12  
13 function f3() {
14 //當前函式呼叫棧:f1-->f2-->f3
15 console.log("f3");
16 }
17 f1(); //函式f1呼叫的位置

 1 //宣告全域性變數 t
 2 var t = 123; //所有全域性變數自動成為全域性物件的屬性
 3 function foo() {
 4 console.log("foo"); //foo
 5 console.log(this); //this ---> 全域性物件window
 6 console.log(this.t);//123
 7 }
 8  
 9  
10 foo(); //非嚴格模式下:以普通函式方式呼叫
11  
12 function fn() {
13 "use strict"; //作用域開啟嚴格模式
14 console.log("fn"); //fn
15 console.log(this); //this --->undefined
16 //Uncaught TypeError: Cannot read property `t` of undefined
17 console.log(this.t);
18 }
19  
20 fn(); //嚴格模式下:以普通函式方式呼叫

 1 var name = "wenidngding";
 2 function showName() {
 3 console.log(this.name);
 4 }
 5  
 6 //普通函式呼叫，函式中的this預設繫結到全域性物件，列印wendingding
 7 showName();
 8  
 9 var obj = {
10 name:"小豬佩奇",
11 showName:showName
12 }
13  
14 //物件方法呼叫，函式中的this繫結到當前的上下文物件obj,列印小豬佩奇
15 obj.showName();

 1 //字面量方式建立物件，該物件擁有name屬性和showName方法
 2 var obj1 = {
 3 name:"小豬佩奇",
 4 showName:function () {
 5 console.log(this.name);
 6 }
 7 }
 8  
 9 //呼叫位置(001)
10 //物件方法呼叫，函式中的this繫結到當前的上下文物件obj1,列印小豬佩奇
11 obj1.showName();
12  
13 //[1] 把obj.showName方法賦值給其他的物件
14 var obj2 = {name:"阿文"};
15 obj2.show = obj1.showName;
16  
17 //呼叫位置(002)
18 //物件方法呼叫，函式中的this繫結到當前的上下文物件obj2,列印阿文
19 obj2.show();
20  
21 //[2] 把obj.showName方法賦值給一個變數
22 var fn = obj1.showName;
23  
24 //呼叫位置(003)
25 //普通函式呼叫，函式中的this指向全域性物件，列印空字串（window.name屬性值是空字串）
26 //注意：函式呼叫方式發生了改變，this丟失了
27 fn();
28  
29 //[3] 把obj.showName方法作為其他函式的引數（回撥函式）來使用
30 //宣告函式，該函式接收一個函式作為引數
31 function foo(callBack) {
32 //呼叫位置(004)
33 //普通函式呼叫，函式中的this指向全域性物件，列印空字串（window.name屬性值是空字串）
34 //注意：函式呼叫方式發生了改變，this丟失了
35 callBack();
36 }
37 //呼叫位置(005) 此處不涉及this
38 foo(obj1.showName);

1 console.log(document.getElementById("demoID")); //正確
2  
3 //宣告getById函式，該函式指向document.getElementById方法
4 var getById = document.getElementById;
5  
6 console.log(getById("demoID"));//報錯：Uncaught TypeError: Illegal invocation

1 var getById = function () {
2 //顯式的設定document.getElementById函式內部的this繫結到document物件
3 return document.getElementById.apply(document,arguments)
4 };
5 console.log(getById("demoID")); //正確

 1 //宣告一個Person函式
 2 function Perosn(name,age) {
 3 this.name = name;
 4 this.age = age;
 5 this.show = function () {
 6 console.log("姓名：" + this.name + " 年齡：" + this.age);
 7 }
 8 }
 9  
10 //函式呼叫位置(001)
11 //建構函式方式呼叫(new繫結) Person函式內部的this指向新建立的例項物件
12 var p1 = new Perosn("zs",18);
13  
14 //函式呼叫位置(002)
15 //物件方法的方式呼叫(隱式繫結) show方法內部的this指向的是引用的物件，也就是p1
16 //列印：姓名：zs 年齡：18
17 p1.show();

 1 var obj1 = {
 2 name:"zs",
 3 showName:function (a,b) {
 4 console.log("姓名 " + this.name,a, b);
 5 }
 6 };
 7  
 8 var obj2 = {name:"ls"};
 9  
10 //函式呼叫位置(001)
11 //以物件方法的方式呼叫函式，函式內部的this指向引用物件，也就是obj1
12 //列印結果為：姓名 zs 1 2
13 obj1.showName(1,2);
14  
15 //函式呼叫位置(002)
16 //obj2物件並不擁有showName方法，此處報錯：obj2.showName is not a function
17 //obj2.showName();
18  
19 //函式呼叫位置(003)
20 //函式上下文的方式(call)呼叫函式，函式內部的this繫結給第一個引數obj2
21 //列印結果為：姓名 ls 哈哈 嘿嘿
22 //第一個引數：obj2指定函式內this的繫結物件
23 //其它的引數：哈哈和嘿嘿這兩個字串是傳遞給showName函式的實參，呼叫時會賦值給函式的形參：a和b
24 obj1.showName.call(obj2,"哈哈","嘿嘿");
25  
26 //函式呼叫位置(004)
27 //函式上下文的方式(apply)呼叫函式，函式內部的this繫結給第一個引數obj2
28 //列印結果為：姓名 ls 呵呵 嘎嘎
29 //第一個引數：obj2指定函式內this的繫結物件
30 //其它的引數：呵呵和嘎嘎這兩個字串是傳遞給showName函式的實參，呼叫時會賦值給函式的形參：a和b
31 obj1.showName.apply(obj2,["呵呵","嘎嘎"]);

 1 /**[程式碼 01]**/
 2 //宣告全域性變數用於測試
 3 var name = "測試的name";
 4 var obj1 = {
 5 name:"zs",
 6 showName:function (a,b) {
 7 console.log("姓名 " + this.name,a, b);
 8 }
 9 };
10  
11 //注意：雖然此處以上下文的方式呼叫，但是因為傳遞的第一個引數是null,實際這裡應用的是預設繫結規則
12 obj1.showName.call(null,1,2); //姓名 測試的name 1 2
13 obj1.showName.call(undefined,1,2); //姓名 測試的name 1 2

 1/**[程式碼 02]**/
 2 //開啟嚴格模式
 3 "use strict";
 4  
 5 //宣告全域性變數用於測試
 6 var obj = {
 7 name:"zs",
 8 showName:function () {
 9 console.log(this);
10 }
11 };
12  
13 obj.showName.call(null); //null
14 obj.showName.apply(undefined); //undefined
15  
16 //建議的處理方式
17 obj.showName.apply(Object.create(null));

 1 //宣告函式
 2 function fn() {
 3 console.log("fn",this);
 4 //fn函式中返回一個箭頭函式
 5 return ()=>{
 6 console.log(this);
 7 }
 8 }
 9  
10 var o = {name:"zs"};
11 //fn以普通函式方式呼叫，fn中的this指向全域性物件
12 //箭頭函式中的this繫結由外部的詞法作用域來決定,this指向window
13 fn()();
14  
15 //fn以函式上下文方式呼叫，fn中的this指向物件o
16 //箭頭函式中的this繫結由外部的詞法作用域來決定,this指向物件o
17 fn.call(o)(); //this指向{name:"zs"}物件

 1 var objA = {
 2 name:"zs",
 3 showName:function(){
 4 console.log(this.name);
 5 }
 6 }
 7  
 8 var objB = {name:"ls"};
 9 objA.showName(); //物件方法呼叫，this指向objA 列印zs
10  
11 (objB.showName = objA.showName)(); //列印 空字串

1 var f = objB.showName = objA.showName;
2 f(); //列印 空字串