我们先来定义一个函数,用三种不同的方式调用,会产生三种不同的结果
function foo(){
console.log(this);
}
foo()
let obj ={
name:'sss',
foo:foo
}
obj.foo()
foo.call("abc") // 生成包装类型对象
运行后的三种结果
那么这说明了什么呢?
1.函数在调用时,JavaScript会默认给this绑定一个值。
2.this的绑定与编写的位置没有关系
3.this的绑定与调用的方式以及调用的位置有关
4.this的绑定是在运行时进行的
this的四大绑定规则
一.默认绑定
独立函数调用的就是默认绑定,简单说就是函数没有绑定到某个对象上进行调用
默认返回window
例如:
function foo(){
console.log(this);
}
foo() // 独立函数调用
let obj ={
name:'sss',
bar:function(){
console.log(this);
}
}
let ff = obj.bar
ff() // 函数在对象中,但是独立函数独立函数调用
// 高阶函数
function test(fn){
fn()
}
test(obj.bar) //相当于fn=obj.bar fn() 所以还是独立函数调用
来看下结果都是window(严格模式下是undefined)
二.隐式绑定
在调用位置中,通过对象来发起的调用
会返回调用它的那个对象
例如:
let obj ={
name:'sss',
bar:function(){
console.log(this);
}
}
obj.bar() // 通过对象调用,结果是 obj
三.new绑定
JavaScript中的函数可以当作一个构造函数来使用,也就是new关键字
我们先来回忆一下new关键字做了什么:
1.创建了一个空对象
2.将空对象绑定在this上
3.执行代码
4.没有显示返回非空对象时,即返回这个对象
function person(name) {
this.name =name
console.log(this);
}
new person('sss') // person
看看结果,显然返回的是那个创建的新实例
也就是this绑定的是创建的新实例
四.显示绑定
相当于强制绑定,使用call,bind,apply等一系列方法进行强制绑定
来看代码
// 显示绑定
function foo(){
console.log(this);
}
let obj ={
name:'sss'
}
// 此时我们希望this指向obj 如果是正常情况下该这么指向呢
// 1
obj.foo = foo
obj.foo() // obj
// 但是我们希望直接绑定 就可以通过call 来进行显示绑定
foo.call(obj) //obj
foo.call("123") //"123"
foo.call(123) //123
foo.call(undefine) // 特例:window
显示绑定简单来说就是通过一些方法来进行强制绑定,this就是强制绑定的那个对象
三种方法call,apply,bind的区别
function foo(name,age){
console.log(this,name,age);
}
let obj ={
num:'1'
}
foo.call(obj,'sss',18)
foo.apply(obj,['zzz',19])
let f = foo.bind(obj,'mm',20)
f()
f()
f()
很明显,都可以传递参数,但是apply需要将参数放在数组中,而call并不需要,使用bind后可以重复调用,类似于函数柯里化
绑定规则优先级
既然我们现在已经了解了绑定规则,那么我们就来看下他们的优先级
首先默认绑定的优先级是最低的,很容易就能知道
//优先级
function foo(){
console.log(this);
}
let obj = {
name:'ss',
foo:foo
}
obj.foo.call('nn') // 结果是 包装对象nn
// 显然显示大于隐形绑定
new obj.foo() // 结果是foo实例对象
// new绑定大于隐式绑定
// new 和显示绑定绑定不能一起使用
let f = foo.bind(obj)
new f() // 结果依然是foo实例对象 new绑定>显示绑定
let f2 = foo.bind(obj)
f2.call('ss') // 结果是obj对象 bind>call
最后我们可以得出结论
new > bind >apply/call > 隐式绑定 > 默认绑定
一些小细节
1.一些内置函数的this指向
function foo(){
console.log(this);
}
setTimeout(foo,1000) //Window
let btn = document.querySelector('button')
btn.addEventListener('click',foo) //button
let ar = [1,2,3,4]
ar.forEach(item=>console.log(this)) //Window
setTimeout内部绑定的this是window ,btn的this指向按钮,forEach方法指向Window
2.显示绑定传入null和undefine
(1)情况一
function foo(){
console.log(this);
}
foo.apply("ss") //"ss"
foo.apply(null) //Window
foo.apply(undefined) //Window
说明在我们传入null和undefined时,会忽略显示绑定,使用默认规则
另外,在严格模式下则是会返回基本的数据类型
"use strict"
function foo(){
console.log(this);
}
foo.apply("ss") //"ss"
foo.apply(null) //null
foo.apply(undefined) //undefine
(2)情况二:创建一个函数的 间接引用,这种情况也是使用默认绑定规则
function foo(){
console.log(this);
}
let obj = {
foo:foo
}
(a = obj.foo)() // Window
a =obj.foo 会默认返回foo() 相当于独立调用,使用默认规则
箭头函数的this
箭头函数中是没有this的,所以它会去不断去上一层的作用域查找this并使用
举个例子
let obj = {
name:'obj',
foo:()=>{
let bar = ()=>{
console.log(this);
}
return bar
}
}
let fn = obj.foo()
fn.apply("bbb") // Window
最后打印的是Window,fn等于bar 但是bar是一个箭头函数,没有this,所以显式绑定不生效,此时会去上一层找,但仍然是箭头函数,再向上找到了全局作用域Window(备注:obj的{}不是作用域)
面试题1
let name = 'Window';
let Person = {
name:'person',
say:function(){
console.log(this);
}
};
let ss = Person.say;
ss(); // Window
Person.say(); // Person
(Person.say)(); // Person
(b = Person.say)(); // Window
面试题2
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 () {
// console.log(this) // 第一个表达式this -> person1
// console.log(this) // 第二个表达式this -> person2
// console.log(this) // 第三个表达式this -> person1
return () => {
console.log(this.name)
}
}
}
var person2 = { name: 'person2' }
// 开始题目:
person1.foo1(); // 隐式绑定: person1
person1.foo1.call(person2); // 显式绑定: person2
person1.foo2(); // 上层作用域: window
person1.foo2.call(person2); // 上层作用域: window
person1.foo3()(); // 默认绑定: window
person1.foo3.call(person2)(); // 默认绑定: window
person1.foo3().call(person2); // 显式绑定: person2
person1.foo4()(); // person1
person1.foo4.call(person2)(); // person2
person1.foo4().call(person2); // person1
面试题3
var name = 'window'
/*
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
person1.foo1.call(person2) // 显式绑定: person2
person1.foo2() // 上层作用域查找: person1
person1.foo2.call(person2) // 上层作用域查找: person1
person1.foo3()() // 默认绑定: window
person1.foo3.call(person2)() // 默认绑定: window
person1.foo3().call(person2) // 显式绑定: person2
person1.foo4()() // 上层作用域查找: person1(隐式绑定)
person1.foo4.call(person2)() // 上层作用域查找: person2(显式绑定)
person1.foo4().call(person2) // 上层作用域查找: person1(隐式绑定)
面试题4
var name = 'window'
/*
1.创建一个空的对象
2.将这个空的对象赋值给this
3.执行函数体中代码
4.将这个新的对象默认返回
*/
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()() // 默认绑定: window
person1.obj.foo1.call(person2)() // 默认绑定: window
person1.obj.foo1().call(person2) // 显式绑定: person2
person1.obj.foo2()() // 上层作用域查找: obj(隐式绑定)
person1.obj.foo2.call(person2)() // 上层作用域查找: person2(显式绑定)
person1.obj.foo2().call(person2) // 上层作用域查找: obj(隐式绑定)