this绑定规则。
1、函数在调用时，javascript会默认给this绑定一个值
2、this的绑定和定义的位置（编写的位置）没有关系
3、this的绑定和调用方式以及调用的位置有关系
4、this是在运行时被绑定的。
this有四种绑定规则：
分别为默认绑定，隐式绑定，显式绑定，new绑定
规则一：默认绑定
如下绑定方式都是默认绑定，
独立函数调用时进行默认绑定，跟定义的位置没有关系
// 案例一：
function foo(){
console.log(this) //window1
}
foo() //独立调用
// 案例二：
function foo1(){
console.log(this)//window1
}
function foo2(){
console.log(this)//window1
foo1()
}
function foo3(){
console.log(this)//window1
foo2()
}
foo3()//独立调用
// 案例三：
var obj = {
name:'why',
foo:function(){
console.log(this)
}
} //跟定义的位置没有关系
var obj = obj.foo
obj() //调用的方式有关系，独立调用。
// 案例四：
function foo(){
console.log(this) //window
}
var obj = {
name:'why',
foo:foo
}
var bar = obj.foo
bar() //调用的方式有关系，独立调用。
// 案例五：
function foo(){
return function(){
console.log(this) //window
}
}
var fn = foo()
fn() //调用的方式有关系，独立调用。
规则二：隐式绑定。
永远指向调用这个函数的对象。
object对象会被js引擎绑定到fn函数中的this里面
// 案例一：
function foo(){
console.log(this)
}
var obj = {
name:'why',
foo:foo
}
obj.foo()
//案列二：
var obj ={
name:'xuan',
eating:function(){
console.log(this.name + "在吃东西")
}
}
obj.eating() //xuan在吃东西
var fn = obj.eating
fn() // 在吃东西 默认调用，指向window
//案例三：
var obj1 = {
name:'obj1',
foo:function(){
console.log(this.name) //obj2
}
}
var obj2 = {
name:'obj2',
bar:obj1.foo
}
obj2.bar() //不管调用过程是怎样的，只要是通过对象调用起来的，就指向这个对象
规则三：显式绑定（call,apply,bind）
call和apply的使用：
在隐式绑定中，必须在调用的对象内部有一个对函数的引用，那如果不想在这个对象内部引用函数，那就必须通过call或apply来改变this指向。如下图。obj中没有引用函数，可以通过call或apply来改变指向。
var name = 'xuan'
var obj = {
name:'obj'
}
function sum(){
console.log(this.name)
}
sum() //xuan
sum.call(obj) //obj
sum.apply(obj) //obj
bind的使用：
如下call要多次使用需每次都通过call来绑定，而bind只需要直接调接收的这个变量即可。
如下涉及到优先级问题，隐式绑定大于window优先级，所以可以直接newFoo()
var obj ={name:'aa'}
function foo(){
console.log(this)
}
foo.call(obj)
foo.call(obj)
foo.call(obj)
foo.call(obj)
foo.call(obj)
foo.call(obj)
var newFoo = foo.bind(obj)
newFoo()
newFoo()
newFoo()
newFoo()
newFoo()
newFoo()
call与apply的区别：
区别就在于传参方式不一样，call是逗号分隔传，apply是存放到数组中一块传
var name = 'xuan'
var obj = {
name:'obj'
}
function sum(num1,num2,num3){
console.log(num1 + num2 + num3,this.name)
}
sum.call(obj,1,2,3) //6 'obj'
sum.apply(obj,[1,2,3]) //6 'obj'
call,apply 与bind 的区别 ：
call和apply可以直接进行改变，而bind必须有一个变量来接收才行
foo.call(obj)
foo.apply(obj)
//bind
var newFoo = foo.bind(obj)
newFoo()
规则四：new绑定
我们通过一个new关键字调用一个函数时（构造器），这个时候this是在调用这个构造器时创建出来的对象，this = 创建出来的对象
function Person(name,age){
this.name = name
this.age = age
}
var p1 = new Person('xuan',15)
var p2 = new Person('xiang',16)
console.log(p1.name,p1.age) //xuan 15
console.log(p2.name,p2.age) //xiang 16
------------------------------------其他地方使用this的解析：----------------------------------------------
一、setTimout中的this：
//普通函数中的this是window
setTimeout(function(){
console.log(this) //window
},1000)
//箭头函数中的this是由上级作用域来指向
setTimeout(()=>{
console.log(this) //window
},1000)
二、监听点击事件中的this
操作dom事件中的this指向当前操作的dom元素
<div class="box"></div>
<script>
var box = document.querySelector('.box')
box.onclick = function(){
console.log(this) //<div class="box"></div>
}
</script>
三、数组高阶函数中this
高阶函数中this默认指向window,可以有第二个参数，第二个参数就是改变当前this的指向到它。
var names = ['abc','cba','nba']
names.forEach(function(item){
console.log(this) //window
})
names.map(function(item){
console.log(this) //aaa
},'aaa')
-------------------------------------------------------------绑定规则优先级----------------------------------------------------------
1、默认规则下优先级最低
2、显式绑定>隐式绑定
call和apply：
var obj = {
name:'obj',
foo:function(){
console.log(this)
}
}
obj.foo() //obj
obj.foo.call('abc') //abc
obj.foo.apply('abc') //abc1
bind:
// 案例一
var obj = {
name:'obj',
foo:function(){
console.log(this)
}
}
var bar = obj.foo.bind('cba') //cba
bar()
// 案例二
function foo(){
console.log(this)
}
var obj = {
name:'obj',
foo:foo.bind('aaa')
}
obj.foo() // aaa
3、new绑定 > 隐式绑定
var obj = {
name:'obj',
foo:function(){
console.log(this) // foo{}
}
}
var f = new obj.foo()
4、new 显式绑定
new关键字不能和call/apply绑定,只能和bind一起用。
new > bind
function foo(){
console.log(this) // foo{}
}
var bar = foo.bind('aaa')
var obj = new bar()
-------------------------------------------------------------thsi规则之外----------------------------------------------------------
一、忽略显示绑定
当在显示绑定中将它指向unll或undefined中时指向的是window
function foo(){
console.log(this)
}
var obj = {
name:'why'
}
foo.call(null) //window
foo.apply(undefined) //window
var bar = foo.bind(null) //window
bar()
二、箭头函数中this
箭头函数中的this指向的是外层作用域使用的this。
var name = 'xxx'
var obj = {
name:'xuan',
getData:function(){
setTimeout(function(){
console.log(this.name) //xxx
},1000)
setTimeout(()=>{
console.log(this.name) //xuan
},1000)
}
}
obj.getData()
注：对象是没有作用域的，所以下边this.name指向的并不是person中的name，而是再外层的window
var name = 'window'
var person = {
name:'person',
foo:()=>{
console.log(this.name)
}
}
person.foo()
