关于thi指向的经典面试题

前面的话

建议先了解this的5种绑定情况，再来刷题：this的5种绑定情况

• 第一题

  function t(){
     this.x=2; // this  指向window
     }
     t();
     console.log(window.x); // 2

• 第二题

var a=10;
var foo={
  a:20,
  bar:function(){
      var a=30;
      console.log(this)
      return this.a;
    }
};
foo.bar()； // 打印对象foo
(foo.bar)()  // 打印对象foo
(foo.bar=foo.bar)()  // 打印对象Window
(foo.bar,foo.bar)() // 打印对象Window

• 第三题：

var obj = {
    x: 1,
    y: 2,
    t: function() {
    console.log(this.x)
    }
    }
    obj.t(); // 1

    var dog={x:11};
    dog.t=obj.t;
    dog.t();// 11 


    var show=function(){
    console.log('show'+this.x);
    }
    dog.t=show;
    dog.t();//show11

• 第四题：

name = 'this is window';
    var obj1 = {
    name: 'php',
    t: function() {
    console.log(this.name)
    }
    };
    var dog1 = {
    name: 'huzi'
    };

    obj1.t(); // php

    dog1.t = obj1.t;

    var tmp = dog1.t;
    tmp(); // this is window 

    (dog1.t = obj1.t)(); // 这里只是函数的引用所以打印  this is window
    dog1.t.call(obj1); //php 

• 第五题：

 var number=2;
    var obj={
    number:4,
    /*匿名函数自调*/
    fn1:(function(){
    var number;
    this.number*=2;// window.number = 4   
    number=number*2;// undefined
    number=3;//3 
    return function(){
    var num=this.number; // 第一次执行fn1:num = window.number =4, 第二次执行fn2:num = obj.number = 4
    this.number*=2; //  第一次执行fn1:window.number = 8;  第二次执行fn1:obj.number = 8
    console.log(num); // 4
    number*=3; //  第一次执行fn1: 9    第二次执行fn1为 27
    alert(number); // 第一次执行fn1: 9    第二次执行fn1为 27
    }
    })()
    }

    var fn1=obj.fn1;

    alert(number);// 4

    fn1();//4  9 // this指向window

    obj.fn1();// 4 27  // this指向obj

    alert(window.number);// 8

    alert(obj.number);// 8

• 第六题

var num = 1;
    var myObject = {
        num: 2,
        add: function() {
            this.num = 3; 
            (function() {
                console.log(this.num); // 立即执行函数  window.num = 1
                this.num = 4; // window.num = 4
            })();
            console.log(this.num);
        },
        sub: function() {
            console.log(this.num)
        }
    }
    myObject.add();// 1 3
    console.log(myObject.num);// 3
    console.log(num);// 4
    var sub = myObject.sub; 
    sub();// 4 

• 第七题：

 var name = 'window'

    var person1 = {
    name: 'person1',
    show1: function () {
        console.log(this.name)
    },
    show2: () => console.log(this.name),
    show3: function () {
        return function () {
        console.log(this.name)
        }
    },
    show4: function () {
        return () => console.log(this.name)
    }
    }
    var person2 = { name: 'person2' }

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

    person1.show2()// 箭头函数this，指向其父级作用域的this,这里为window  打印window
    person1.show2.call(person2)// 箭头函数无法使用call,apply改变this指向  同样打印window

    person1.show3()() // window
    person1.show3().call(person2)// person2
    person1.show3.call(person2)()// window

    person1.show4()()// person1  箭头函数的this为父级作用域的this,这里为this指向person1
    person1.show4().call(person2) // person1  父级作用域的this指向person1
    person1.show4.call(person2)() // person2  父级作用域的this指向person2

• 第八题

 var name = 'window'

    function Person (name) {
    this.name = name;
    this.show1 = function () {
        console.log(this.name)
    }
    this.show2 = () => console.log(this.name)
    this.show3 = function () {
        return function () {
        console.log(this.name)
        }
    }
    this.show4 = function () {
        return () => console.log(this.name)
    }
    }

    var personA = new Person('personA')
    var personB = new Person('personB')

    personA.show1(); // personA
    personA.show1.call(personB) // personB

    personA.show2()// personA，首先personA是new绑定， this指向实例化对象，箭头函数不能绑定this
    personA.show2.call(personB)// personA 同上

    personA.show3()()// window
    personA.show3().call(personB) // personB
    personA.show3.call(personB)()// window

    personA.show4()() // personA
    personA.show4().call(personB) // personA
    personA.show4.call(personB)() // personB