欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

js中的this如何使用

程序员文章站 2022-04-04 13:42:25
...
js中的this到底是什么意思

JS里面总是会用到this,今天就和大家好好的谈一下这个容易把人弄糊涂的this到底是个什么东西,怎样使用this

this的指向1, 普通函数指向函数的调用者:有个简便的方法就是看函数前面有没有点,如果有点,那么就指向点前面的那个值;2, 箭头函数指向函数所在的所用域: 注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域;

const obj = {
name: 'objName',
say() {
console.log(this.name);  
      }, 
read: () => {
     console.log(this.name);
             }
       }
obj.say(); // objName
obj.read(); // undefined


普通函数,调用者是obj,所以结果是 objname;也是理解say()是普通函数,前面有点,所以this指向obj;

箭头函数,this指向函数所在的作用域,当前的作用域为全局环境,所以this.name为undefined,

举下面的例子更清楚的了解一下箭头函数this的指向,箭头函数所在的作用域是普通函数say,say()的调用者是obj

const obj = { 
say: function () {
  setTimeout(() => {
   console.log(this)
                  });
                 }
             }


obj.say(); // obj,此时this指的是定义他的obj



补充知识点

浏览器默认的this为window

function test() {  
console.log(this);
}

test(); //window


node.js中全局环境默认this为{},普通函数中默认this为global

console.log(this); // {}
function test() {
 console.log(this);
}
test(); //global


来两道题检查你是否掌握了

example1

const length = 10;
function fn() {
console.log(this.length);
}
const  obj = {
  length: 5,
  method: function(fn) { 
  fn();
  arguments[0]();   
  }
};
obj.method(fn, 1);

输出 10, 2

刚开始看到这道题我也是蒙蒙的,现在也终于理解了,method这个函数传入了两个参数,一个参数为fn(),fn()为普通函数,this指向函数的调用者,此时指向全局(也可以看这个函数前面没有点),所以运行结果为10,arguments是函数的所有参数,是一个类数组的对象,arguments[0] (),可以看成是arguments.0(),调用这个函数的是arguments,此时this就是指arguments,this.length就是angument.length,就是传入的参数的总个数2


注: 上面例子在node环境中的运行结果为 undefined 2, const length = 10改成global.length = 10;是因为node环境下定义在全局的变量不会绑定到global,浏览器也会自动绑定到全局环境window

改成下面这样结果又是什么呢?

const length = 10;
function fn() {
    console.log(this.length);
}
const obj = {
    length: 5,
    method: function(fn) {
        fn();
        const fun = arguments[0];
        fun();
    }
};
obj.method(fn, 1);
10, 10
example 2
window.val = 1;
var obj = {
    val: 2,
    dbl: function() {
        this.val *= 2
        val *= 2;
        console.log(val);
        console.log(this.val);
    }
}
obj.dbl(); // 2 4
var func = obj.dbl;
func(); // 8 8


这个就是有点绕了,不过一步步来分析就很容易理解了:

obj.dbl();执行这行代码时,this指的是obj,所以this.val === obj.val*=2,最后结果为4,val*=2 === window.val *= 2,最后结果是2

func(),执行这行代码时,func()没有任何前缀,this指的是window.func();所以此时this值得是window,this.val === window.val *= 2,此时window.val 为4,val*=2 === window.val *2,最后结果为8,最后console.log(this.val),与console.log(val),指的都是window.val。


以上就是我对this的一些小理解,如果大家对于我的这篇文章有所疑问,欢迎和我交流。

相关推荐:

如何理解JavaScript面向对象基础与this指向问题

JS中this与event的区别详解

JS中this、apply、call、bind的相关介绍

以上就是js中的this如何使用的详细内容,更多请关注其它相关文章!