专栏首页萌兔itJavaScript入门总结第五弹——带你搞懂this

JavaScript入门总结第五弹——带你搞懂this

Hello,小可爱们我又来了!今天的主题是一个非常困惑人的专题,this,想要弄清this的指向,也是一件不容易的事情。下面我们就开始正题了~~

this

1

this是什么

不同于其它面向对象语言this只表示当前对象的引用,在JavaScript中,this的指向不是固定不变的,而是会随着执行环境而改变的。

比如:this 可以表示方法所属对象;this 可以表示全局对象;this 可以是未定义的(undefined);this 可以表示接收事件的元素;this 也可以引用到任何对象。

2

方法所属对象

在对象方法中,当函数作为某个对象的方法调用时,this指向调用方法的对象;如果将函数值赋给某变量且没有立即执行的时候,this的值就要根据函数执行时所在环境进行判断,如下例子,rabbit1的执行环境就是全局

var color = "yellow"

var rabbit = { color: "white",

tail: "short",

style : function() { return this.color + " " + this.tail;

}

};

rabbit.style()//white short

var rabbit1 = rabbit.style

rabbit1()//yellow short

3

全局对象

全局作用域或者普通函数中this指向全局对象window

console.log(this)//window

function myRabbit () {

console.log(this)

}

myRabbit()//window

4

未定义的(undefined)

严格模式下函数没有绑定到this上,这时候this是undefined

"use strict";

function myRabbit() { console.log(this);

}

5

接收事件

在绑定HTML元素事件时,this指向接收事件的HTML元素

<button onclick="alert('Meo')">Click me</button>

6

对象绑定

call,apply

通过call或apply可以改变函数的调用对象,从而改变this的指向。this会绑定到call或apply的第一个参数上,不传参数,则绑定至全局。

这里call和apply作用相同,但是有一点点区别,那就是call的第二个及后续参数是一个参数列表,apply的第二个是一个数组,参数列表和参数数组都将作为函数的参数进行执行。

var x = 1;

var obj = {

x:2

}

function myRabbit() { console.log(this.x);

}

myRabbit.call(obj) //2

myRabbit.apply(obj) //2

myRabbit.call() //1

myRabbit.apply(null) //1

myRabbit.call(undefined) //1

bind

bind 方法会创建一个新函数,新函数的 this 会永久的指向 bind 传入的第一个参数。call, apply也不能改变。

var x = 1;

var obj = {

x:2

}

function myRabbit() { console.log(this.x);

}

var a = myRabbit.bind(obj)

myRabbit() //1

a() //2

7

构造函数调用

使用 new 关键字,通过构造函数生成一个实例对象。此时,this 便指向这个新对象。当构造函数返回对象时,this指向返回对象,如果返回非引用类型,则仍然指向实例话的新对象。

var x = 1;

function myRabbit() { this.x = 2;

}

var a = new myRabbit()

console.log(a.x) //2

8

箭头函数

ES6 新增的箭头函数不仅更加整洁,还对 this 的指向进行了改进。箭头函数会从作用域链的上一层继承 this。如下例子,obj.y()运行时,调用的对象是obj,this指向obj,y中的箭头函数继承y中的this,结果为2.将y赋值给a,y中的this指向全局对象,得到1。ps:call和apply也不能改变this的指向

var x = 1;

var obj = {

x: 2,

y:function(){

var myRabbit = () => {

console.log(this.x)

}

return myRabbit()

}

}

obj.y() //2

var a = obj.y

a() //1

好了,今天的内容就到此为止了,不知道小伙伴们有没有搞懂this的指向呢,喜欢兔妞的文章就请点击好看让更多人看到吧~~么么哒!

本文分享自微信公众号 - 萌兔it(mengtu_it),作者:萌兔IT

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-02-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 数据结构与JS也可以成为CP(十)Graph图

    1)深度优先搜索算法比较简单:访问一个没有访问过的顶点,将它标记为已访问,再递归地去访问在初始顶点的邻接表中其他没有访问过的顶点。

    萌兔IT
  • 数据结构于JS也可以成为CP(二)列表

    Hello小伙伴们~上次分享有小伙伴在后台留言说程序就是一个数据结构,怎么说呢,我觉得这是片面的,在生产中,我们往往会尽量避免在前端写业务逻辑,因为有些不安全,...

    萌兔IT
  • 数据结构于JS也可以成为CP(四)队列

    Hello小伙伴们,好久不见,栈说完了,我们就来说说队列吧~这是个和栈遥相呼应的数据结构呢。还记得栈的特点吗,栈只能在栈顶添加或删除。栈是一种后入先出的结构。而...

    萌兔IT
  • element表单校验问题

    新增时,校验为空未通过,点击取消按钮。重新打开编辑,明明有值,显示校验未通过。

    崔笑颜
  • 简易路由实现——(hash路由)

    前阵子逛 github 的时候,看见一篇文章 《原生JS实现hash路由》, 想着照着 vue-router 的 api,参考这篇文章实现一个可直接用于 htm...

    小皮咖
  • 使用物理引擎Box2D设计类愤怒小鸟的击球游戏--基本架构设置

    望月从良
  • 定时获取服务器时间戳的一个类(Typescript)

    我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite...

    lilugirl
  • Flutter基础widgets教程-TabBar篇

    青年码农
  • 详解javascript中this的工作原理

    在 JavaScript 中 this 常常指向方法调用的对象,但有些时候并不是这样的,本文将详细解读在不同的情况下 this 的指向。

    用户6167509

扫码关注云+社区

领取腾讯云代金券