JavaScript中的this

简介: JavaScript中的this

this指向


  1. 函数在调用时,JavaScript会默认给this绑定一个值;
  2. this的绑定和定义的位置(编写的位置)没有关系;

 3.this的绑定和调用方式以及调用的位置有关系;

 4.this是在运行时被绑定的;


默认绑定:

微信图片_20221010125843.png

隐式绑定:


在调用位置中,是通过某个对象发起函数的调用

微信图片_20221010170016.png

new绑定:


JavaScript中的函数可以当做一个类的构造函数来使用,也就是使用new关键字.

微信图片_20221010170058.png

显示绑定:


微信图片_20221010170134.png

注意:JavaScript所有的函数都可以使用call和apply方法:

第一个传入参数都是相同的,要求传入一个对象,通过直接绑定了this的指向对象,称作显示绑定

微信图片_20221010170159.png

如果我们希望一个函数总是显示的绑定到一个对象上,可以使用bind方法。bind() 方法创建一个新的绑定函数。在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用

微信图片_20221010170235.png

规则优先级


  • new绑定>bind绑定(new绑定和call、apply是不允许同时使用的,所以不存在谁的优先级更高;new绑定可以和bind一起使用,new绑定优先级更高)
  • new绑定>隐式绑定
  • 显示绑定>隐式绑定
  • 默认规则的优先级最低


箭头函数(arrow function):


箭头函数是ES6之后增加的一种编写函数的方法,并且它比函数表达式更要简洁


  • 箭头函数不会绑定this、arguments属性;(this引用就会从上层作用于中找到对应的this)
  • 箭头函数不能作为构造函数来使用(不能和new一起来使用,会抛出错误。箭头函数中没有原型);

注意:如果函数执行体只有返回一个对象, 那么需要给这个对象加上()


相关文章
|
6月前
|
JavaScript 前端开发
javascript中的this
javascript中的this
|
6月前
|
JavaScript
JS中改变this指向的六种方法
JS中改变this指向的六种方法
|
5月前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【6月更文挑战第15天】JavaScript的`this`根据调用方式变化:非严格模式下直接调用时指向全局对象(浏览器为window),严格模式下为undefined。作为对象方法时,`this`指对象本身。用`new`调用构造函数时,`this`指新实例。`call`,`apply`,`bind`可显式设定`this`值。箭头函数和绑定方法有助于管理复杂场景中的`this`行为。
59 3
|
4月前
|
JavaScript
js 【详解】函数中的 this 指向
js 【详解】函数中的 this 指向
38 0
|
4月前
|
JavaScript 前端开发
|
6月前
|
JavaScript 前端开发
js中改变this指向、动态指定函数 this 值的方法
js中改变this指向、动态指定函数 this 值的方法
|
5月前
|
JavaScript
js -- 函数总结篇,函数提升、动态参数、剩余参数、箭头函数、this指向......
js -- 函数总结篇,函数提升、动态参数、剩余参数、箭头函数、this指向......
|
5月前
|
JavaScript 前端开发
JS中如何使用this方法
JS中如何使用this方法
18 0
|
6月前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下,直接调用函数时`this`指全局对象,严格模式下为`undefined`。作为对象方法调用时,`this`指向该对象。用`new`调用构造函数时,`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中,`this`可能不直观,箭头函数和绑定方法可帮助管理`this`的行为。
43 1
|
6月前
|
JavaScript 前端开发
深入探索JavaScript:如何改变this的指向
深入探索JavaScript:如何改变this的指向
49 2
下一篇
无影云桌面