第八节: JavaScript中this指向问题

1. this指向问题

1.1 认识词法作用域

其实我们js中的作用域就是词法作用域,我们会发现词法作用域最重要的特征是发生函数定义时确定的,

动态作用域呢是在函数运行时确定的形式,而不是函数定义时确定的形式

function foo(){
    console.log(a);
}
function bar(){
    var a = 3;
    foo();
}
bar();
var a = 2;

如果js具有动态作用域那么这里应该打印3,但是不好意思告诉你们,js只有词法作用域,但是js的函数内部有一个在某种程度上和动态作用域很像的,那就是this

主要区别是

词法作用域是在函数定义时确定的

动态作用域是在函数运行时确定的,this也是这样

词法作用域关心的是函数在何处定义,动态作用域关注函数在何处被调用

既然动态作用域和this都只关心在什么位置被调用，那么我们就不得不提的调用栈，调用位置

1.2 理解调用栈

调用位置就是函数被调用的位置，调用栈是是为了能够到达当前执行位置所调用的所有函数

调用位置就在当前赈灾执行的函数的前一个调用中

function  baz(){
    // 当前调用栈 是 baz
    // 因此调用位置是在全局
    console.log("baz");
    bar(); // bar的调用位置
}

function bar(){
    // 当前调用栈 是 baz -- bar
    // 因此调用位置是baz
    console.log("bar");
    foo(); // foo的调用位置
}

function foo(){
    // 当前调用栈 是 baz -- bar  -- foo
    // 因此调用位置是bar中
    console.log("foo");
}

baz()  // baz的调用位置

在调用栈中分析调用位置,因为他决定this的绑定

1.3 this 指向问题

this关键字是JS中最复杂的机制,它是一个很特别的关键字,被自动定义在所有函数的作用域中.

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

this指向的是一个对象,我们把this指向的对象叫做函数执行的上下文对象

当函数被调用的时候，this指向会发生改变,指向调用函数的对象

在函数预编译阶段，会生成AO对象，程序还会默认把this作为AO对象的一个属性名，默认属性值是window

2.this绑定的规则

2.1 默认绑定

就是直接使用不带任何修饰的函数引用进行的调用,就是默认绑定,无法应用其他规则

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

// 改变
function fn(){
    console.log(this.a);
}
var a = 2;
fn();

2.2 隐式绑定

考虑函数调用位置是否有上下文对象,或者说是否被某个函数拥有或包含

示例:

function fn(){
    console.log(this);
}      
var obj = {
    a : 33,
    fn:fn
}
obj.fn();       // obj

对象引用链只有上一层或者说最后一层在调用的位置中起作用

function foo(){
    console.log(this.a);
}
var obj2 = {
    a: 42,
    foo: foo
}
var obj1 = {
    a: 22,
    obj2: obj2
}
obj1.obj2.foo();   // 42

隐式绑定的函数会丢失绑定对象

function foo(){
    console.log(this.a);
}
var obj = {
    a : 20,
    foo: foo
}
var a = 33;
var bar = obj.foo;
bar(); //33
// 此时赋值的知识函数的引用,bar则是一个不带任何修饰的函数调用,因此应用了默认绑定

测试

var name = "wuwei";
function showName(){
    console.log(this.name);
}
var person1 = {
    name: "old",
    sayName:showName
}
var person2 = {
    name: "xiaoming",
    sayName: function(){
        var fun = person1.sayName;
        fun();
    }
}
person1.sayName();    // old
person2.sayName();    // wuwei

2.3 显示绑定

我们发现隐式绑定时,必须在一个对象内部包含一个指向函数的属性.并通过这个属性间接的应用函数.从而把this隐式的绑定到这个对象上.

如果我们不想在函数内部包含函数的引用呢.我们就只能用接下来要学习的方法,显示的绑定了

2.3.1 call和applay方法

call && apply方法,

作用.都是在函数执行时,修改this的指向

call 和 apply方法由两层意思

函数执行

在函数执行的时候修改函数内部的this指向

这两个方法存在于函数的原型上,至于是原型 ,咱们以后会学,你只要知道函数可以调用这两个方法就行了

使用

function foo(){
    console.log(this.a)
}
var obj = {
    a: 20
}
foo.call(obj);

这里就是通过call这个方法子foo函数调用的时候将函数内部的this绑定到了obj上

如果我传入一个数字,字符串布尔值怎么办

function foo(){
    console.log(this.a)
}
var obj = {
    a: 20
}
foo.call(true);
// 为什么是undefined 而不报错呢

这是包装类,这里第一参数必须是对象,如果不是对象,会将其转为包装对象,转不了就是window

call && apply 方法的区别
使用方法

fn.call(obj,attr1,attr2,attr3,..);
fn.applay(obj,[attr1,attr2,attr3,..])

这两个方法传参的方式不同，apply只能传数组

示例:

function add(c,d){
    return this.a + this.b + c + d;
}
var s = {a:1,b:2};
console.log(add.call(s,3,4));
console.log(add.apply(s,[5,6]));

上面程序的输出结果是什么？

2.3.2硬绑定

function foo(){
    console.log(this.a);
}
var obj = {
    a: 35
}
var bar = function(){
    foo.call(obj);
}

bar();
bar.call(window);

因为硬绑定非常常用的方法,所有ES5也提供了内置的方便.bind

function foo(){
    console.log(this);
    console.log(this.a) ;
}
var obj = {
    a: 23
}
var bar = foo.bind(obj)
bar();

此时就算你使用call,apply 也改变不了函数的bar的this绑定

function foo(){
    console.log(this);
    console.log(this.a) ;
}
var obj = {
    a: 23
}
var a = 33;
var bar = foo.bind(obj)
bar.call(window);

2.4 new 操作符

new操作符在构造函数那一节的的时候已经讲过,
现在我们就知道关于this指向的绑定情况有四种.那么接下来看看优先级的问题

3. 优先级

你需要做的就是找到函数的调用位置并判断应用了那条规则,如果某个调用位置可以应用多条规则,我们就需要通过优先级来区分

默认的优先级最低

显示优先级高于隐式

function foo(){
    console.log(this.a)
}
var obj1 = {
    a: 10,
    foo: foo
}
var obj2 = {
    a: 20,
    foo: foo
}
obj1.foo();    // 10
obj2.foo();    // 20

obj1.foo.call(obj2);  //  20
obj2.foo.call(obj1);  //  10

new绑定比隐式绑定优先级高

function foo(aa){
    this.a = aa
}
var obj = {
 foo.foo
}
obj.foo(2);
console.log(obj.a);    // 2

var bar = new obj.foo(4);
console.log(obj.a);    // 2
console.log(bar.a);    // 4

new操作符比显示绑定中的硬绑定优先级高

function foo(aa){
    this.a = aa;
}
var obj = {}
var bar = foo.bind(obj);

bar(20);
console.log(obj.a);

var baz = new bar(30);
console.log(obj.a);
console.log(baz.a);

至于为什么用new操作符还要用bind绑定是为了提前传一些参数进去

判断原则

函数是否使用new操作符调用,如果有,那么this将绑定到新创建的对象

函数是否使用call,apply或者硬绑定,如果有,this执行显示绑定的对象

函数是否在某个上下文对象中调用,如果有this指向那个上下文对象(隐式绑定)

如果以上都不是,那就是默认绑定,

4. 特殊情况

被忽略的this

function foo(){
    console.log(this.a)
}
var a = 2;
foo.call(null);   // 2

如果你传入null或undefined将会忽略传入的值,实际使用默认值

那么什么时候会需要用到传入null的情况呢

使用apply展开参数

function foo(a,b){
    console.log("a: "+ a + " ,b: " + b);
}
foo.apply(null,[2,3]);

因为这里我们不需要关心this指向,那么我们用null占位最好,

题:

var a = 10;
function aa(){
    console.log(a);
    a = 0;
    console.log(this.a);
    var a;
    console.log(a);
}
aa();