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热门面试题