[ JS个人笔记 ] this的指向—DAY8

this 是 JavaScript 的关键字this 是 function 执行时,自动生成的内部物件随着 function 执行的场合不同,this 指向的值也会有所不同大多情况下,this 代表的就是呼叫 function 的物件

判断关键

this 决定在于函式如何被呼叫

纯粹的调用(一般的函式呼叫、立即函式 IIFE、闭包 Closure、间接参考)window物件的方法调用ObjectDOM 物件调用Object (监听函式中的 this 会指向的则是该 DOM 物件)建构式的调用Object > 属于 new 它的物件bind, apply, call传入的物件箭头函示 >箭头函数会自动将 this 变数绑定到其定义时所在的物件window 或 定义的环境箭头函示不得当建构式在严格模式下,一般函式呼叫的 this 值都是 undefined。

间接参考需特别注意

以下为各个案例
1.变数指定物件下的方法,并执行

 var name = 'GlobalName';   function foo() {     console.log(this.name);   }   var obj = {     name: 'tom',     foo: foo,   };   obj.foo()                        //tom(物件的方法调用)   var callThisName = obj.foo;      //GlobalName(间接参考)   callThisName(); // "GlobalName"

2.参数传递中的callback function,也属于间接参考

var name = 'GlobalName';function foo() {  console.log(this.name);}var obj = {  name: 'tom',  foo: foo,};function boo(fn) {  fn();}boo(obj.foo); // "GlobalName"

3.物件下的多层方法也属于间接参考

var name = 'GlobalName';var obj = {  name: 'tom',  foo: function(){    console.log(this.name)         //tom    function inner() {      console.log(this.name)       //GlobalName      function inner2() {        console.log(this.name)     //GlobalName      }          inner2()    }    inner()  }};obj.foo()

热门面试题

1.依序出现甚么

function callName(){  console.log(this.name)}var obj = {  name:'tom',  callName:callName,  nickname:{    name:'tommy',    callName:callName  }}obj.callName()obj.nickname.callName()

Ans: tom、tommy

2.依序出现甚么

var name = "Global name"function callName(){  console.log(this.name)}var obj = {  name:'tom',  callName:callName,  nickname:{    name:'tommy',    callName:callName  }}var newcall1 = obj.callNamevar newcall2 = obj.nickname.callNamenewcall1()newcall2()

Ans: Global name、Global name(因为是间接参考)
3.依序出现甚么

function callName(){  console.log(this.name)}var obj = {  name:'tom',  callName:callName,  nickname:{    name:'tommy',    callName:callName  }}var newcall1 = objvar newcall2 = obj.nicknamevar newcall3 = newcall1.callName()      //已执行,非间接参考var newcall4 = newcall2.callNamenewcall3newcall4

Ans:tom、[Function: callName]

4.会印出什么呢~若是严谨模式下又会印出甚么

// "use strict"var name = 'tom';function callName(){  console.log(this.name);};var a = {  name:'alice',  callName:callName}callName.name = 'jonna'a.callName()

Ans:alice、Cannot assign to read only property 'name'

5.会依序印出什么呢~(时常忘记!!)

var name = 'tom';var a = {  name:'alice',  myName:function () {    console.log(this.name);    let call = () =>{    console.log(this.name);    }    call()  }, call2:() =>{    console.log(this.name);  },  call3:()=>{    name = 'wtf?'    console.log(this.name)  },}a.myName();a.call2();a.call3()

Ans: alice、alice、tom、wtf? (箭头函式作用域)

6.会依序印出什么呢~(开始觉得噁心了....)

var name = 'tom';var obj = {  x:{    name:'jam',    myname:function(){      console.log(this.name);      (function(){        console.log(this.name);      })();      setTimeout(function(){        console.log(this.name);      },500)    }  },  name:'alice'}var a = obj.x.myname();a;

Ans:jam、tom、tom

7.依序出现什么答案(噁心更加延伸)

var name = 'tom';var obj = {  x:{    name:'jam',    myname:function(){      this.name = 'amy'      console.log(this.name);      (function(){        this.name = 'john'        console.log(this.name);      })();      function final(){        console.log(this.name)      };      setTimeout(function(){        this.name = 'sam'        console.log(this.name);        final()      },500);    }  },  name:'alice'}var a = obj.x.myname();a;console.log(obj.x.name)console.log(this.name)

Ans:amy、john、amy、john、sam、john
参考资源:
竹白笔记、影片、文章、js热门面试题


关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章