夯实JS基础（一）：this的指向问题和经典面试题

lucas 发布于2019-08-26 10:29 / 3266人阅读

摘要：很多高级编程语言都给新创建的对象分配一个引用自身的指针比如中的指针，中的，也有指针，虽然它的指向可能相对复杂些，但是指向的，永远只可能是对象。

很多高级编程语言都给新创建的对象分配一个引用自身的指针,比如JAVA、C++中的this指针，python中的self，JavaScript也有this指针，虽然它的指向可能相对复杂些，但是this指向的，永远只可能是对象。

一、在一般函数方法中使用 this 指代全局对象

function test(){
　  this.x = 1
　　console.log(this.x)
}
test()  // 1

二、.作为对象方法调用，this 指代上级对象，数组同理

var obj = {
    name:"obj",
    func1 : function() {
        console.log(this)
    }
}
obj.func1()  // this--->obj

document.getElementById("div").onclick = function(){
   console.log(this)
}; // this--->div

三、函数作为window内置函数的回调函数调用：this指向window对象（setInterval、setTimeout 等）

window.setInterval(function(){
  console.log(this)
}, 300)

四、作为构造函数调用，this 指代 new 实例化的对象

function test(){
　　this.x = 1
}
var o = new test()
alert(o.x)  // 1

五、apply、call、bind改变函数的调用对象，此方法的第一个参数为改变后调用这个函数的对象

var x = 0;
function test(){
　　console.log(this.x)
}
var obj = {}
obj.x = 1
obj.m = test
obj.m.apply() //0，apply()的参数为空时，默认调用全局对象
obj.m.apply(obj); //1

六、匿名函数的执行环境具有全局性，this对象通常指向window对象

var name = "The Window";
var obj = {
    name: "My obj",
    getName: function() {
        return function() {
            console.log(this.name);
        };
    }
};

obj.getName()(); // "The Window"

纸上得来终觉浅，绝知此事要躬行，一起动手刷一下this的经典面试题吧

var x = 3;
var y = 4;
var obj = {
    x: 1,
    y: 6,
    getX: function() {
        var x =5;
        return function() {
            return this.x;
        }();
    },
    getY: function() {
        var y =7;
         return this.y;
    }
}
console.log(obj.getX())//3
console.log(obj.getY())//6

 var name="the window";

 var object={
    name:"My Object", 
    getName:function(){ 
       return this.name;
   } 
 }

 object.getName();   //"My Object"

(object.getName)();   //"My Object"

(object.getName=object.getName)();   //"the window"，函数赋值会改变内部this的指向，这也是为什么需要在 React 类组件中为事件处理程序绑定this的原因;

 var a=10; 
 var obt={ 
   a:20, 
   fn:function(){ 
     var a=30; 
     console.log(this.a)
   } 
 }
 obt.fn();  // 20

 obt.fn.call(); // 10

 (obt.fn)(); // 20

 (obt.fn,obt.fn)(); // 10

 new obt.fn(); // undefined

function a(xx){
  this.x = xx;
  return this
};
var x = a(5);
var y = a(6);

console.log(x.x)  // undefined
console.log(y.x)  // 6

<题目持续更新中...>

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106262.html

夯实JS基础（一）：this的指向问题和经典面试题

摘要：很多高级编程语言都给新创建的对象分配一个引用自身的指针比如中的指针，中的，也有指针，虽然它的指向可能相对复杂些，但是指向的，永远只可能是对象。很多高级编程语言都给新创建的对象分配一个引用自身的指针,比如JAVA、C++中的this指针，python中的self，JavaScript也有this指针，虽然它的指向可能相对复杂些，但是this指向的，永远只可能是对象。一、在一般函数方法...

EasonTyler 2019-08-02 15:42 评论0 收藏0
程序员口述：我是如何工作三年后跳槽到美团的？

摘要：终于，我在看到美团的社招信息后，勇敢地迈出了第一步。当时参加的是美团点评部门的面试，部门前端技术栈是，后端用的。后来才知道美团是一次性全部面完的。所以以后有去参加美团面试的童鞋，最好做好面试四个小时的打算。 showImg(https://segmentfault.com/img/bV0c3T?w=672&h=361); 前言我叫王小闰（花名），非科班出身，野生前端从业者，在小公司打...

nevermind 2019-08-22 11:16 评论0 收藏0
程序员口述：我是如何工作三年后跳槽到美团的？

摘要：终于，我在看到美团的社招信息后，勇敢地迈出了第一步。当时参加的是美团点评部门的面试，部门前端技术栈是，后端用的。后来才知道美团是一次性全部面完的。所以以后有去参加美团面试的童鞋，最好做好面试四个小时的打算。 showImg(https://segmentfault.com/img/bV0c3T?w=672&h=361); 前言我叫王小闰（花名），非科班出身，野生前端从业者，在小公司打...

greatwhole 2019-06-26 17:30 评论0 收藏0