JavaScript this 关键字的理解

最新推荐文章于 2024-10-09 11:19:11 发布

monkey01127

最新推荐文章于 2024-10-09 11:19:11 发布

阅读量117

点赞数

分类专栏： javascript 文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_47027124/article/details/115373246

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

this 关键字，如果前端面试有笔试，那么关于这个考点十有八九会有与其相关的题目的，说真的在实际的项目中开发们也整不出那么重复的变量名吧。
理解一段时间后，我发现自己就开始慢慢的忘记，还是好好梳理一下吧。

this当前对象的一个引用，始终指向调用它的对象

JavaScript 中 this 随着执行环境的改变而改变。

规则

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
构造函数中的this指定的是new关键字创建出来的对象
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似== call() 和 apply() 方法可以将 this 引用到任何对象==。

什么是函数？

函数就是没有和其它的类显示的绑定在一起的

什么是方法?

方法就是显示的和其它的类绑定在一起的

函数与方法的区别

函数可以直接调用, 但是方法不能直接调用, 只能通过对象来调用
函数内部的this输出的是window, 方法内部的this输出的是当前调用的那个对象

方法中

var name = 'monkey"';
var person = {
  name: 'John',
  getName : function() {
    return this.name;
  }
};
person.getName();
// John

单独使用

function person() {
  return this;
}
person();
// window

构造函数

构造函数中的this指定的是new关键字创建出来的对象

function Person (name) {
  this.name =  name;
  this.getName = function() {
    return this.name;
  }
}
var obj = new Person('sunny');
obj.getName(); // sunny

巩固练习

对象方法 + 函数调用


var name = 'monkey';
var obj = {
    name : 'John',
    getName : function(){
        console.log(this.name);
    }
};
var a = obj.getName(); 
// John
var getName = obj.getName;
getName();
// monkey

var name = 'monkey';
var obj = {
    name : 'John',
    getName : function(){
        console.log(this.name);
        function other() {
        	console.log(this.name)
        }
        other();
    }
};
obj.getName();
// John
// monkey
// other 为函数调用模式，this指向的window

函数调用

var length = 99;
function getLen(){
   console.log(this.length);
}
var obj = {
   name : 5,
   method : function(getLen) {
       getLen();
       arguments[0]();
   }
};
obj.method(getLen, 'monkey', 'zoe', 'sunny', 'tony', 'eric');

贴上参考图示，因为现在我还并没有理解，哈哈哈
在这里插入图片描述

其他题目摘录(过了一遍，后面慢慢品味，哈哈哈)

var o = {
    a: 10,
    b: {
        a: 12,
        fn: function(){
            console.log(this.a); // 输出结果是 12
            console.log(this); // 输出结果是 b 对象
        }
    }
}
//调用
o.b.fn();

var o = {
    a: 10,
    b:  {
        fn: function(){
            console.log(this.a); // undefined
            console.log(this);   // b对象
        }
    }
}
//调用
o.b.fn();

var o = {
    a: 10,
    b: {
        a: 12,
        fn: function(){
            console.log(this.a); //undefined 若在对象o外定义a，则输出的就是其在外定义的值(全局变量)
            console.log(this);   // window
        }
    }
}
var j = o.b.fn; //只是将b对象下的方法赋值给j，并没有调用
j(); //调用，此时绑定的对象是window,并非b对象直接调用

var point = { 
    x : 0, 
    y : 0, 
    moveTo : function(x, y) { 
        this.x = this.x + x; 
        this.y = this.y + y;
        console.log(this.x); // 1
        console.log(this.y); // 1
    } 
}; 
point.moveTo(1, 1)//this 绑定到当前对象，即 point 对象

function someFun(x) { 
    this.x = x; 
} 
someFun(5); //函数被调用时，this绑定的是全局对象 window,相当于直接声明了一个全局变量x，并赋值为5
console.log(x); // x 已经成为一个值为 5 的全局隐式变量

var point = { 
    x : 0, 
    y : 0, 
    moveTo : function(x, y) { 
       // 内部函数
       var moveX = function(x) { 
           this.x = x;
       }; 
       // 内部函数
       var moveY = function(y) { 
           this.y = y;
       };
       moveX(x); // 这里是全局调用
       moveY(y); 
    }
}; 
point.moveTo(1, 1); 
console.log(point.x); // 0
console.log(point.y); // 0

var point = { 
	    x : 0, 
	    y : 0, 
	    moveTo : function(x, y) { 
	
	        var that = this; //内部变量替换
	
	        // 内部函数
	        var moveX = function(x) { 
	            that.x = x; 
	           // this.x = x;
	        }; 
	        // 内部函数
	        var moveY = function(y) { 
	            that.y = y;
	           // this.y = y;
	        } 
	        moveX(x); //这里依然是全局调用，但是在给变量赋值时，不再是this指向，而是that指向，而that指向的对象是 point。
	        moveY(y); 
	    } 
    }; 
    point.moveTo(1, 1); 
    console.log(point.x); // 1
    console.log(point.y); // 1
    console.log(x) // 报错 x is not defined
    console.log(y) //

function Point(x, y){ 
       console.log(this); // point对象
       this.x = x; 
       this.y = y; 
       this.moveTo = function(x,y){
          this.x = x;
          this.y = y;
          console.log(this.x);//1 10
          console.log(this.y);//1 10
       }
    }
    var p1 =  new Point(0,0); //注意这种形式方法的调用及apply、call的使用

    var p2 = {
        x:0,
        y:0
    }
    p1.moveTo(1,1); 
    p1.moveTo.apply(p2,[10,10]);

    console.log(x);// x is not defined
    console.log(y);//

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

var a = 10;
var oTimer1 = setInterval(function(){
    var a = 20;
    console.log(this.a); // 10
    clearInterval(oTimer1);
},100);

(function(){
    eval("console.log(this)"); // Window
})();
function Foo(){
    this.bar = function(){
        eval("console.log(this)"); // Foo
    }
}
var foo = new Foo();
foo.bar();

var a = 10;
var foo = {
	a: 20,
	fn: function(){
	    console.log(this.a);
	}
};
var bar ={
    a: 30
}
foo.fn.apply();//10(若参数为空，默认指向全局对象)
foo.fn.apply(foo);//20
foo.fn();//20
foo.fn.apply(bar);//30