this的指向

1.this的作用

从某些角度来说，开发中如果没有this,很多问题我们也是有解决方案的
但是没有this，会让我们编写代码变得非常的不方便

var obj100 = {
    name: 'why',
    eating: function () {
        console.log(obj100.name + '在吃东西');
    },
    running: function () {
        console.log(obj100.name + '在吃东西');
    },
    studying: function () {
        console.log(obj100.name + '在学习');
    }
}


var info = {
    name: 'info',
    eating: function () {
        console.log(this.name + '在吃东西');
    },
    running: function () {
        console.log(this.name + '在吃东西');
    },
    studying: function () {
        console.log(this.name + '在学习');
    }
}

2.this在全局作用域指向什么

在大多数情况下，this都是出现在函数中
在全局作用域下
浏览器: window(globalObject)
Node环境：{}
（
Node 环境中为什么this是一个空对象 :Node会把这个文件当作一个模块去处理
module -> 加载 -> 编译 -> 放到一个函数 -> 执行这个函数.apply({})
）

console.log(this);

3.同一个函数的this的不同

this指向什么，跟函数所处的位置是没有关系
跟函数被调用的方式是有关系的

function foo() {
    console.log(this);
}

// 1.直接调用
foo();


// 2.创建一个对象，对象中的函数指向foo
var obj = {
    name: 'why',
    foo: foo
}

obj.foo();


// 3.apply调用
foo.apply("abc");

4.this的绑定规则

1. 绑定一：默认绑定

默认绑定：独立函数调用

案例一：
function foo() {
    console.log(this);
}

foo()//window


案例二：
function foo1() {
    console.log(this);
}

function foo2() {
    console.log(this);
    foo1();
}

function foo3() {
    console.log(this);
    foo2();
}

foo3();//window

案例三：
var obj = {
    name: 'why',
    foo: function () {
        console.log(this);
    }
}

var bar = obj.foo;
bar();//window

案例四：
function foo() {
    console.log(this);
}

var obj = {
    name: 'why',
    foo: foo
}

var bar = obj.foo;
bar();//window

2. 绑定二：隐式绑定

隐式绑定：Object.fn
Object对象被JS引擎绑定到fn函数中的this里面

// 案例一：
var obj = {
    name: 'why',
    foo: function () {
        console.log(this);
    }
}

obj.foo();


// 案例二：
var obj = {
    name: 'why',
    eating: function () {
        console.log(this.name + '在吃饭');
    },
    running: function () {
        console.log(this.name + '在运动');
    }
}

obj.eating();
obj.running();

3. 绑定三：显示绑定

call和apply在执行函数时,是可以明确的绑定this，这个绑定规则称之为显示绑定

1.call

sum.call('call', 20, 30, 40)

2. apply

sum.apply('apply', [20, 30, 40])

3. brind

bind绑定返回一个新的函数对象

function foo() {
    console.log(this);
}
var newFoo = foo.bind('aaaa');
newFoo();

4. 绑定四：new绑定

我们通过一个new关键字调用一个函数时，这个时候this是在调用这个构造器时创建出来的对象
this = 创建出来的对象
这个绑定过程就是new 绑定

function Person(name, age) {
    this.name = name;
    this.age = age

    // 默认return this
}

var p1 = new Person('why', 18)
console.log(p1.name, p1.age);
var p2 = new Person('kobe', 30)
console.log(p2.name, p2.age);