JavaScript难点之this到底该怎么用

 更新时间:2026年06月15日 11:35:11   作者:三乐228  
在JavaScript中this是一个特殊的变量,它引用了当前执行上下文中的对象,在不同的上下文中,this的值可能会有所不同,这篇文章主要介绍了JavaScript难点之this到底该怎么用的相关资料,需要的朋友可以参考下

为什么要有this?

我们来看两串代码

这一串没有this辅助

const user1={name:'张三'}
function sayName1(){
console.log(user1.name)
}
const user2={name:'李四'}
function sayName2(){
console.log(user2.name)
}
sayName1()//张三
sayName2()//李四

这一串有this辅助

function sayName(){
console.log(this.name)
}
const user1={name:'张三'}
const user2={name:'李四'}
sayName.call(user1)//张三
sayName.call(user2)//李四

明明两串代码差不多长,为什么偏偏选择要用this

因为this是js当中的一个关键字,提供了一种更优雅的方式隐式地传递一个对象的引用,可以让代码更高效更简洁,易于复用

this能被用在哪?

有域的地方就有this,用在不同的地方,代指的东西不一样

  1. 全局

this出现在全局时 this===window

this在node中被使用时,输出的是一个空对象

console.log(this)//{}

this被浏览器调用时

  1. 函数体内

this的绑定规则

  1. 默认绑定:当函数独立调用时,函数中的this指向window对象
var a=1    //===window:{a:1}
function foo() {
    console.log(this.a)
}

function bar(){
    var a=2
    foo()
}
bar()//浏览器输出1,node输出undefined

当代码执行时,由于foo里面没有定义a,所以foo就会去window找a,所以输出1

  1. 隐式绑定:当一个函数被一个上下文对象所拥有,并被该对象调用,函数中的this指向该对象
function foo(){
    console.log(this)
}
var obj={
    a:1,
   foo:foo
}
 obj.foo()//{a:1,foo:f}

此时foo被obj调用,所以this指向obj,输出{a:1,foo:f}

  1. 隐式丢失:当一个函数被多层对象调用,函数的this指向最近的那个对象
function foo() {
    console.log(this.a)
}

var obj = {
    a: 1,
    foo: foo
}

var oo = {
    a: 2,
    foo: obj
}

oo.foo.foo()//1,相当于执行obj.foo(),所以this指向的是obj
  1. 显示绑定:
  • fn.call(obj,x,y)
function foo(x,y){
    console.log(this.a,x+y)
}
var obj={
    a:1
}
foo.call(obj,1,2,3)//1  3  将obj中的参数传入foo中执行,其余从前往后执行
foo//undefined NaN
  • fn.apply(obj,[x,y]) ,xy是数组的最后两位
function foo(a,x,y){
    console.log(this.a,x+y)
}
var obj={
    a:1
}
foo.apply(obj,[1,2,3,4])//1 7    执行数组的最后两位,分别是3、4
  • fn.bind(obj,x,y)()
function foo(a,x,y){
    console.log(this.a,x+y)
}
var obj={
    a:1
}

foo.bind(obj,1,2,3,4)(1,2)//1 5 返回的值是2,3,是从第二个参数开始执行的
foo.bind(obj,1)(1)//1 2  参数可以分开传递

小拓展之箭头函数

箭头函数没有this的概念,写在箭头函数中的this,也是它外层那个非箭头函数的this

var fn=()=>{
    console.log(this.a)
}
var obj={
    a:1,
    fn:fn
}
obj.fn()//undefined

this挂载在全局上,相当于在全局输出a,执行时与obj无关,由于全局没有定义a,所以输出undefined

不能作为构造函数用

function foo(){
 var fn=()=>{
  this.a=1
 }
 fn()//相当于foo(){this.a=1}
}
 var obj={
    a:2,
    bar:foo
 }
obj.bar()
console.log(obj.a)//1

总结 

到此这篇关于JavaScript难点之this到底该怎么用的文章就介绍到这了,更多相关JS this怎么用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解CocosCreator中几种计时器的使用方法

    详解CocosCreator中几种计时器的使用方法

    这篇文章主要介绍了CocosCreator中几种计时器的使用方法,推荐使用schedule,功能多些,销毁时还能自动移除
    2021-04-04
  • JS中循环遍历数组的四种方式总结

    JS中循环遍历数组的四种方式总结

    这篇文章主要给大家总结介绍了关于JS中循环遍历数组的四种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • js实现星星打分效果的方法

    js实现星星打分效果的方法

    这篇文章主要介绍了js实现星星打分效果的方法,涉及javascript操作页面元素与样式的技巧,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-04-04
  • 基于js 本地存储(详解)

    基于js 本地存储(详解)

    下面小编就为大家带来一篇基于js 本地存储(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • javascript数组的内置方法详解

    javascript数组的内置方法详解

    这篇文章主要介绍了javascript数组的内置方法,介绍的非常详解,具有参考借鉴价值,感兴趣的朋友一起学习吧,希望能够给你带来帮助
    2021-09-09
  • JS表格组件BootstrapTable行内编辑解决方案x-editable

    JS表格组件BootstrapTable行内编辑解决方案x-editable

    这篇文章主要介绍了JS组件系列BootstrapTable行内编辑解决方案:x-editable,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 微信小程序实现发红包功能

    微信小程序实现发红包功能

    这篇文章主要为大家详细介绍了微信小程序实现发红包功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • 解析浏览器端的AJAX缓存机制

    解析浏览器端的AJAX缓存机制

    这里我们来解析浏览器端的AJAX缓存机制,来共同看一下AJAX缓存与HTTP缓存的关系以及AJAX缓存的刷新时间问题
    2016-06-06
  • JavaScript实现表格表单的随机选择和简单的随机点名

    JavaScript实现表格表单的随机选择和简单的随机点名

    本文主要介绍了JavaScript实现表格表单的随机选择和简单的随机点名,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 3款实用的在线JS代码工具(国外)

    3款实用的在线JS代码工具(国外)

    本文为大家推荐3款非常实用的在线JS代码工具,可以帮助你方便地处理JavaScript或jQuery代码
    2012-03-03

最新评论