1.默认绑定（指向windows）
什么情况下使用默认绑定呢?独立函数调用（指向windows）。
独立的函数调用我们可以理解成函数没有被绑定到某个对象上进行调用
//1.普通函数被独立调用
function foo (){
console.log("foo",this)
}
foo()//this此时指向window
//2.函数定义在对象，但被独立调用
var obj={
name: "test",
bar: function(){
console.log("bar",this)
}
}
var bar =obj.bar
bar()//this此时指向window
//3.高阶函数
function test(fn){
fn()
}
test(obj.bar)//this此时指向window
//4.严格模式下，函数内 this 指向 undefind
2.隐式绑定（指向对象）
image.png
3.new 绑定（指向对象）
image.png
4.显示绑定(指定 this 的绑定对象）
通过 call()、apply()、bind() 方法，直接指定 this 的绑定对象，如 foo.call(obj))
image.png
image.png
PS:函数补充，apply(),call()，bind()使用
image.png
image.png
5.内置函数
image.png
6.规则优先级
从高到低
image.png
image.png
7.this绑定之外的规则
7.1 忽略显示绑定
image.png
7.2 间接函数引用
image.png
8. 箭头函数 arrow function
箭头函数是ES6之后增加的一种编写函数的方法，并且它比函数表达式要更加简洁:
口箭头函数不会绑定this、arguments属性
口 箭头函数不能作为构造函数来使用(不能和new一起来使用，会抛出错误);
箭头函数是没有绑定this,this的查找规则:
去上层作用城中查找this
直到找到全局this
优化一:如果箭头函数只有一个参数，那么()可以省略
names.forEach(item=>{console.log(item)})
优化二:如果函数体中只有一行执行代码，那么{}可以省略
var names =["abc","cba", "nba" ]
var nums =[20，30，11，15，111]
names.forEach(item =>console.log(item))
nums.filter(item => true)
//一行代码中不能带return关键字,如果省略，需要带return一起省略(下一条规则)
var newNums = nums.filter(item =>{return item%2===0})
优化三:只有一行代码时，这行代码的表达式结果会作为函数的返回信默认返回的
var newNums =nums.filter(item =>item%2 === 0)
优化四:如果函数执行体只有返回一个对象,那么需要给这个对象加上()
//如果默认返回值是一个对象，那么这个对象必须加()
//注意:在react中会经常使用redux
//var arrFn=()=>{}// 注意:这里是{}执行体
var arrFn=()=>({name: "why"})
console.log(arrFn())
var foo =()=>{
return {name:"abc"}
}
var bar=()=>({name: "abc"})
箭头函数不使用this的四种标准规则(也就是不绑定this)，而是根据外层作用域来决定this.
我们来看一个模拟网络请求的案例:
image.png
9.测试题目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
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'}
//1 开始题目:
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
</script>
</body>
</html>
网友评论