JavaScript中this面试题, 四道题彻底清楚this指向问题

this面试题一

如果不清楚this绑定规则可以看上一篇有详细说明

var name = "window";var person = {name: "person",sayName: function () {console.log(this.name);}
};function sayName() {var sss = person.sayName;sss();person.sayName();(person.sayName)();(b = person.sayName)();}sayName();

打印结果:

window person person window

解释:

sss(): 默认绑定, 是独立函数调用, this指向window
person.sayName(): 隐式绑定, this指向发起调用的对象, 因此this指向person
(person.sayName)(): 隐式绑定, 不要被小括号迷惑, "."的优先级很高的, 他依然是隐式绑定, this指向发起调用的对象person
(b = person.sayName)(): 默认绑定, 这是规则之外的间接函数引用(不懂的话可以看上一篇), 赋值语句最终返回一个函数, 函数后面跟小括号就是默认绑定, 独立函数调用, 因此this指向window

this面试题二

var name = 'window'var person1 = {name: 'person1',foo1: function () {console.log(this.name)},foo2: () => console.log(this.name),foo3: function () {return function () {console.log(this.name)}},foo4: function () {return () => {console.log(this.name)}}
}var person2 = { name: 'person2' }// 开始题目:
person1.foo1();
person1.foo1.call(person2);person1.foo2();
person1.foo2.call(person2);person1.foo3()();
person1.foo3.call(person2)();
person1.foo3().call(person2);person1.foo4()();
person1.foo4.call(person2)();
person1.foo4().call(person2);

打印结果

person1 person2
window window
window window person2
person1 person2 person1

解释:

person1.foo1(): 隐式绑定, this指向发起调用的对象person1
person1.foo1.call(person2): 显示绑定, this指向person2
person1.foo2(): foo2是一个箭头函数, 箭头函数中没有this, 会向上级作用域寻找, 上级作用域this指向window
person1.foo2.call(person2): foo2是一个箭头函数, 对箭头函数绑定this是不生效的, 依然会去上一层作用域寻找this, this指向window
person1.foo3()(): 默认绑定, 调用foo3返回一个function定义的独立函数, 在对独立函数调用, this指向window
person1.foo3.call(person2)(): 默认绑定, 通过显式绑定调用foo3, 再对foo3返回的函数独立调用, this指向window
person1.foo3().call(person2): 显式绑定, 通过隐式绑定调用foo3, 在对foo3返回的函数显式绑定person2, this指向person2
person1.foo4()(): 通过隐式绑定调用 foo4, 调用foo4返回一个箭头函数, 箭头函数的this会向上级寻找, this指向person1
person1.foo4.call(person2)(): 通过显式绑定调用foo4, 调用foo4返回一个箭头函数, 箭头函数的this会向上级寻找, this指向person2
person1.foo4().call(person2): 通过隐式绑定调用foo4, 在对返回的箭头函数进行显式绑定, 由于箭头函数中并不存在this, 所以显式绑定call并不生效, 箭头函数的this会向上级寻找, this指向person1

this面试题三

面试题三和面试题四大同小异, 提供给大家练习

var name = 'window'/*通过new进行调用会执行如下操作1.创建一个空的对象2.将这个空的对象赋值给this3.执行函数体中代码4.将这个新的对象默认返回
*/
function Person(name) {this.name = namethis.foo1 = function () {console.log(this.name)},this.foo2 = () => console.log(this.name),this.foo3 = function () {return function () {console.log(this.name)}},this.foo4 = function () {return () => {console.log(this.name)}}
}// person1/person都是对象(实例instance)
var person1 = new Person('person1')
var person2 = new Person('person2')// 面试题目:
person1.foo1()
person1.foo1.call(person2)person1.foo2()
person1.foo2.call(person2)person1.foo3()()
person1.foo3.call(person2)()
person1.foo3().call(person2)person1.foo4()()
person1.foo4.call(person2)()
person1.foo4().call(person2)

打印结果

person1 person2
person1 person1
window window person2
person1 person2 person1

解释

person1.foo1(): 隐式绑定, this指向person1
person1.foo1.call(person2): 显式绑定, this指向person2
person1.foo2(): 通过隐式绑定调用foo2, 调用foo2返回一个箭头函数, 箭头函数的上一级时Person构造函数, Person函数中的this指向person1
person1.foo2.call(person2): 箭头函数中没有this, 显式绑定不起作用, 上层作用域构造函数中Person指向person1
person1.foo3()(): 默认绑定: 独立函数调用, this指向window
person1.foo3.call(person2)(): 默认绑定: 独立函数调用, this指向window
person1.foo3().call(person2): 显式绑定: this指向person2
person1.foo4()(): 箭头函数找上层作用域, 上层作用域被隐式绑定, this指向person1
person1.foo4.call(person2)(): 箭头函数找上层作用域, 上层作用域被显式绑定, this指向person2
person1.foo4().call(person2): 显式绑定对箭头函数无作用, 箭头函数找上层作用域, 上层作用域被隐式绑定, this指向person1

this面试题四

var name = 'window'function Person(name) {this.name = namethis.obj = {name: 'obj',foo1: function () {return function () {console.log(this.name)}},foo2: function () {return () => {console.log(this.name)}}}
}var person1 = new Person('person1')
var person2 = new Person('person2')person1.obj.foo1()()
person1.obj.foo1.call(person2)()
person1.obj.foo1().call(person2)person1.obj.foo2()()
person1.obj.foo2.call(person2)()
person1.obj.foo2().call(person2)

打印结果:

window window person2
obj person2 obj

解释:

person1.obj.foo1()(): 默认绑定: 通过隐式绑定调用foo1, 再对foo1返回的函数独立调用, this指向window
person1.obj.foo1.call(person2)(): 默认绑定, 独立函数调用, this指向window
person1.obj.foo1().call(person2): 显式绑定, this指向person2
person1.obj.foo2()(): 箭头函数找上层作用域, 上层作用域被隐式绑定, this指向obj
person1.obj.foo2.call(person2)(): 箭头函数找上层作用域, 上层作用域被显式绑定, this指向person2
person1.obj.foo2().call(person2): 显式绑定对箭头函数不生效, 箭头函数找上层作用域, 上层作用域被隐式绑定, this指向obj

JavaScript中this面试题, 四道题彻底清楚this指向问题相关推荐

javascript 中搜索数组的四种方法
前端经常要通过 javaScript 来处理数组中的数据,其中就包括检查数组中是否包含满足特定搜索条件的单个或者多个值,这就需要我们关于用于确认的布尔值.数组中值得位置索引或包含所有搜索结果的单独数组 ...
JavaScript中字符串连接/拼接的四种方式
JavaScript中连接字符串的方式有4种,分别是使用加号运算符连接.使用${}配合反引号连接.使用concat()函数连接.使用join()函数连接. 1. 使用加号运算符示例代码如下: let ...
Javascript中类型的判断
数据类型的判断有这么几种方式 1.一元运算符 typeOf 2.关系运算符 instanceof 3.constructor 属性 4.prototype属性一.typeof typeof的返回值有 ...
Javascript基础与面向对象基础~第四讲 Javascript中的类对象
今天来说JS中如何实现类(class),事实上本应该昨天晚上写的,可我失言了,在些说一声"抱歉"!JS中的类是JS面向对象的基础,也是我最拿手的东西,你写的代码能否提高一个层次,一 ...
JavaScript中的load事件的作用_史上最全的web前端面试题汇总及答案JavaScript之二（二）...
作者:樱桃小丸子儿链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...
JavaScript中四种不同的属性检测方式比较
JavaScript中四种不同的属性检测方式比较 1. 用in方法 var o = {x:1}; "x" in o; //true "y" in o; //fa ...
JavaScript中this的指向问题及面试题你掌握了吗？
this 作为JavaScript中的一个关键字,它的复杂度很高,主要原因是它所处不同场景的代表的指向是不一样的.这里先做一个结论,重要事情说三遍: this的指向是由上下文环境动态决定的 this的 ...
【转】JavaScript中的this关键字使用的四种调用模式
http://blog.csdn.net/itpinpai/article/details/51004266 this关键字本意:这个.这里的意思. 在JavaScript中是指每一个方法或函数都会 ...
vb.net中递归退到最外层_面试题被问到再也不慌，深究JavaScript中的深拷贝与浅拷贝...
" 点个关注,养成习惯,带你python爬虫的过程中学习前端 " JavaScript中的深拷贝和浅拷贝是前端面试中频繁被问到的一道题, 于是我也自己去查阅了一些资料, 然后动手敲 ...

JavaScript中this面试题, 四道题彻底清楚this指向问题

this面试题一

this面试题二

this面试题三

this面试题四

JavaScript中this面试题, 四道题彻底清楚this指向问题相关推荐

最新文章

热门文章