资讯专栏INFORMATION COLUMN

this解析

Freelander / 1288人阅读

摘要:每个函数的是在调用的时候被绑定的,完全取决于函数的调用位置。严格模式隐式绑定对象环境这种绑定并不靠谱,比如在回调的情况下。显式绑定隐式绑定把函数直接绑定到了目标对象的一个属性上。是因为事件触发是异步的,如果不,触发时的就是当时的元素。

每个函数的this是在调用的时候被绑定的,完全取决于函数的调用位置
表现特征有点像动态作用域,从就近查找调用栈,来判断this指向谁。

1. 默认绑定 (全局环境)
var a = 2;
function foo(){
    console.log(this.a);
}

foo() //2

这个例子中,foo()在全局环境中被裸着调用,毫无上下文。所以这时this被调用的时候从内向外寻找a,可以找到全局变量a。

但是在严格模式(strict mode)中,默认绑定就不生效

var a = 2;
function foo(){
    "use strict"//严格模式

    console.log(this.a);
}

foo() //undefined
2.隐式绑定 (对象环境)
var obj = {
    a: 2,
    foo:foo
}
function foo(){
    console.log(this.a);
}

obj.foo()//2
foo()//undefined

这种绑定并不靠谱,比如在回调的情况下。

function foo(){
    console.log(this.a);
}
var obj = {
    a:2,
    foo:foo
}
setTimeout(obj.foo, 100);//undefined

为什么不靠谱, 在setTimeout时调用,this指向了setTimeout这个函数而不再是obj这个对象。

3.显式绑定(call, apply, bind)

隐式绑定把函数直接绑定到了目标对象的一个属性上。如果我们不想在对象内部包含函数引用,而想直接在某个对象上运用函数。就要用显式绑定。

function sayName(){
    console.log(this.name);
}
sayName(); //直接调用这个函数将找不到this,返回undefine。

person1 = new Person("leo");
//sayName使用call()将this指向person1就好了。
sayName.call(person1);//"leo" 



function sayNameAndMore(age, gender){
    console.log(this.name + age + gender)
}
//apply用法
sayNameAndMore.apply(person1, [" 18 "," male "]);//leo 18 male

共同点

都是被函数调用,如someFunction.call(obj), someFunction.apply(obj)

都将this指向填入的参数obj,someFunction函数定义中的所有this就可以按照想要的效果进行。

区别

call和apply直接执行,bind之后执行。

call只接受一个参数,而apply接受一个参数数组。

React中的bind

React中我们总是要把事件handle函数bind到组件上。是因为事件触发是异步的,如果不bind,触发时的this就是当时的dom元素。就像上面隐式绑定不靠谱的情况一样。

new绑定

new绑定涉及更多知识点,不在这里写

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102873.html

相关文章

  • Spring-IOC容器容器

    摘要:使用别名时,容器首先将别名元素所定义的别名注册到容器中。调用的方法向容器注册解析的通过对对象的解析和封装返回一个通过这个来注册对象当调用向容器注册解析的时,真正完成注册功能的是。 文章参考来自:https://www.cnblogs.com/ITtan... 文章代码来自 spring-boot 1.4.1 Release版本 Spring IoC容器对Bean定义资源的载入是从ref...

    BigTomato 评论0 收藏0
  • Laravel核心——Ioc服务容器源码解析(服务器解析

    摘要:而函数作用是加载延迟服务,与容器解析关系不大,我们放在以后再说。在构造之前,服务容器会先把放入中,继而再去解析。利用服务容器解析依赖的参数。 make解析 首先欢迎关注我的博客: www.leoyang90.cn 服务容器对对象的自动解析是服务容器的核心功能,make 函数、build 函数是实例化对象重要的核心,先大致看一下代码: public function make($abst...

    hearaway 评论0 收藏0
  • 简单实现迷你Vue框架

    摘要:它们不是主树的一部分。在树中,文档片段被其所有的子元素所代替。因为文档片段存在于内存中,并不在树中,所以将子元素插入到文档片段时不会引起页面回流对元素位置和几何上的计算。因此,使用文档片段通常会带来更好的性能。 本教程说明将采用es6语法来编写 创建MiniVue.js文件 //创建一个MVVM类 class MVVM { // 构造器 constructor(option) ...

    soasme 评论0 收藏0
  • Spring专题之IOC源码分析

    摘要:前言以下源码基于版本解析。实现源码分析对于的实现,总结来说就是定位加载和注册。定位就是需要定位配置文件的位置,加载就是将配置文件加载进内存注册就是通过解析配置文件注册。下面我们从其中的一种使用的方式一步一步的分析的实现源码。 前言 以下源码基于Spring 5.0.2版本解析。 什么是IOC容器? 容器,顾名思义可以用来容纳一切事物。我们平常所说的Spring IOC容器就是一个可以容...

    不知名网友 评论0 收藏0
  • Laravel核心——Ioc服务容器源码解析(服务器绑定)

    摘要:服务容器的绑定绑定欢迎关注我的博客绑定是服务容器最常用的绑定方式,在上一篇文章中我们讨论过,的绑定有三种绑定自身绑定闭包绑定接口今天,我们这篇文章主要从源码上讲解服务容器是如何进行绑定的。将闭包函数和单例变量存入数组中,以备解析时使用。 服务容器的绑定 bind 绑定 欢迎关注我的博客:www.leoyang90.cn bind 绑定是服务容器最常用的绑定方式,在 上一篇文章中我们讨论...

    imtianx 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<