this的面试题目

莹宝思密达

已于 2022-11-11 11:21:16 修改

阅读量179

点赞数

分类专栏： JScor 文章标签： javascript 开发语言

于 2022-11-11 11:20:29 首次发布

本文链接：https://blog.csdn.net/miin_ying/article/details/114030504

版权

JScor 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文深入探讨了JavaScript中的this关键字在不同上下文和调用方式下的指向问题，通过示例解释了函数内部this的绑定规则，包括全局作用域、对象属性、函数返回函数及new操作符等场景。同时，分析了函数赋值如何改变内部this的指向，以及在React组件中绑定this的必要性。

摘要由CSDN通过智能技术生成

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

解析：

var x=a(5)

第一步：运行a(5),

此时a(5)是在全局运行，则this指向window。

function a(){}中 this.x=5,即window.x=5,返回this即返回window,

第二步中， x=a(5),将a(5)的返回值赋值给x,即x= window.

同理，var y=a(6)运行结果为 window.x=6, y=windw

打印x.x相当于 window.x.x,注意红色字体，全局的x被不断重新赋值，最后为6，即window.x.x=6.x，结果为undefined

打印y.x相当于window.y.x即window.x,结果为6

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