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.将这个空的对象赋值给this
3.执行函数体中代码
4.将这个新的对象默认返回
*/
function Person(name) {
this.name = name
this.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 = name
this.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
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/120145.html