this指向-测试小练习

一、独立函数调用练习

var name = 'window'

var person = {
    name: 'person',
    sayName: function () {
        console.log(this.name);
    }
}

function sayName() {
    var sss = person.sayName;
    sss();//window:独立函数调用
    person.sayName();//person：隐式调用
    (person.sayName)();//person：隐式调用
    (b = person.sayName)();//window: 赋值表达式( 独立函数调用)
}

sayName();

二、箭头函数小测验(箭头函数不绑定作用域，this指向找它上层作用域)

var name = 'window'

var obj = {
    foo: function () {
        // obj的花括号只是定义了一个对象本身而已  没有作用域
        // foo的上层作用域是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' }

// 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(箭头函数不绑定作用域，上层作用域this是person1)
person1.foo4.call(person2)();//person2(箭头函数不绑定作用域，上层作用域被显示的绑定一个person2)
person1.foo4().call(person2);//person1(箭头函数不绑定作用域，上册找到person1)

三、new绑定、显示和隐式绑定小测验

var name = 'window'

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);
        }
}

var person1 = new Person('person1');
var person2 = new Person('person2');

person1.foo1(); //person1(隐式绑定)
person1.foo1.call(person2); //person2(显示高于隐式绑定)


person1.foo2();//person1 - 上层作用域的this是person1(箭头函数不绑定this,上层作用域的this是person1)
person1.foo2.call(person2);//person1 - 上层作用域的this是person1(箭头函数不绑定this,上层作用域的this是person1)



person1.foo3()();//window(独立函数调用)
person1.foo3.call(person2)();//windwo(独立函数调用)
person1.foo3().call(person2);//person2(返回一个独立的函数，显示绑定到person2)

person1.foo4()();//person1
person1.foo4.call(person2)();//person2
person1.foo4().call(person2);//person1

四、this指向综合小测验

var name = 'window'

function Person(name) {
    this.name = name;
    this.obj = {
        name: 'obj',
        foo1: function () {
            return function () {
                console.log(this.name);
            }
        },
        foo2: function () {
            // this = obj
            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(显示绑定person2)



person1.obj.foo2()();// obj
person1.obj.foo2.call(person2)();// person2(显示绑定)
person1.obj.foo2().call(person2);// obj

上级作用域的理解

// 上层作用域的理解
var obj = {
    name: 'obj',
    foo: function () {
        // 上层作用域是全局
    }
}

function Person() {
    // Person的上层作用域是全局
    this.foo = () => {
        // 上层作用是Person
    }
}

// 对象字面量和{ }块级作用域的区分
// var 定义对象字面量是没有作用域的
// 块级作用域是把代码块括起来,形成的块级作用域