原生JS大揭秘—撩开this的面纱

Brenner 发布于2019-08-26 11:39 / 2860人阅读

摘要：随着函数使用场景的不同，而发生变化。是当前执行上下文中的一部分。在中新增了该方法也是强制更改指向。但是和的区别是更改后不会立即执行，它会返回一个新函数。

this何意？在英文中this是一个人称代词，表示这个的,具体指哪个？不确定，只有在具体的语境中才可确定，在编程语言中this也有同样的类似特性。
在js中this是一个关键字，它不能被当做变量、属性，也不可以进行赋值操作。
this 随着函数使用场景的不同，而发生变化。
this 是当前执行上下文中的一部分。

this永远指向函数的调用者。 函数内this的取决于函数是如何被调用

当函数是独立调用时，this指向全局对象window（非严格模式），undefined（严格模式）

当函数是作为一个对象的方法被调用时，this指向该对象

构造函数中，this指向new的对象实例

在事件处理函数中，this指向触发事件的DOM对象

// 声明一个函数
function show(){
    console.log(this);
}

// 声明一个对象（变量）
var obj={
    _show:show
}

// 独立调用
show(); // window(非严格模式) undefined(严格模式)

// 作为某个对象的方法调用
show._show(); // obj

// 作为构造函数被调用，指向对象实例
var s = new show(); // this->s

// 作为事件处理函数调用
var aLink=document.getElementById("J-link");
// 事件处理函数中，this指向触发事件的DOM对象
aLink.onclick=show; // this->aLink

在JS中一切皆对象，函数也是对象，既然是对象就有属性和方法，在JS中所有的方法都是两个方法call(),apply()

我们可以使用这两个方法来显示更改函数中this的指向，

call、apply这两个函数的共同特点：改变并立即执行。

区别就是传参方式不同

call是一个一个传入

apply是传入一个数组，一次性传完。

在ES5中新增了bind(),该方法也是强制更改this指向。

但是bind和call、apply的区别是bind更改this后不会立即执行，它会返回一个新函数。

bind传参也是一个一个的传入

特别注意：
  call/apply如果更改为原始值的null、undefined，则this->window
  call/apply如果更改为原始值的Number、String、Boolean，则this->对应的包装对象

// 声明一个对象(变量)
var obj={
    name:"tom",
    age :20
};

// 声明一个函数
function show(a, b){
    console.log(this, a, b);
}

// 独立调用
show(1, 2); // this->window(非严格模式) this->undefined(严格模式)

// 强制更改this指向为obj，并立即执行该函数
show.call(obj, 1, 2); // this->obj
show.apply(obj, [1, 2]); // this->obj

// 强制更改this指向obj,不会立即执行，它返回一个新函数，需要去主动执行这个新函数
show.bind(obj, 1, 2)(); // this->obj

云服务器 GPU云服务器 js里面的this 大揭秘原生js的hover js中的this

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

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

原生JS大揭秘—揭开数据类型转换的面纱

摘要：可以将其他类型转成字符串函数可以将任意类型的值转为布尔值。提示空数组空对象转换为布尔型也是。在JS中数据类型转换有两种相关资料参阅官方ecma-5规范阮一峰老师类型转换规范对相等==定义强制类型转换Number() Number函数将字符串转为数值，要比parseInt函数严格很多，只要有一个字符是非数字（空格、+、-除外），那么就会被转为NaN。 showImg(http...

Moxmi 2019-08-26 11:44 评论0 收藏0
原生JS大揭秘—看清JS继承本质

摘要：继承理论源于生活又高于生活在中继承，和现实生活中继承是相似的如儿子继承父亲财产子女的生理特性有父母的特性身高肤色性格等等只是一定比例上是这样的，不是绝对的一样中继承方法有以下几种本质区别方法特别注意是本质区别冒充继承也称之为借用构造函数这种 JS继承理论源于生活、又高于生活在JS中继承，和现实生活中继承是相似的如:儿子继承父亲财产、子女的生理特性有父母的特性（身高、肤色、性格...

sutaking 2019-08-22 18:09 评论0 收藏0
剑指Kubernetes 揭秘腾讯云的PaaS技术选型策略

摘要：腾讯云在年底决定开发容器产品随后组建容器技术团队并进行技术选型通过对不同编排工具的分析对比最终选择作为容器编排引擎并且迅速在年初推出容器解决方案为用户提供托管的一站式服务。但是腾讯云最终选择了现在看来这个选择无比正确。Kubernetes 很火,一大批互联网公司早已领先一步,搭建起专有的 PaaS平台,传统企业们看到的 Kubernetes的趋势,亦不甘落后,在试水的道上一路狂奔。虽然,Ku...

icattlecoder 2019-04-30 11:34 评论0 收藏0
原生JS大揭秘—JS代码底层运行原理

摘要：是一种基于对象的动态弱类型脚本语言以下简称，是一种解释型语言，和其他的编程语言不同，如等编译型语言，这些语言在代码执行前会进行通篇编译，先编译成字节码机器码。然后在执行。 JavaScript是一种基于对象的动态、弱类型脚本语言（以下简称JS），是一种解释型语言，和其他的编程语言不同，如java/C++等编译型语言，这些语言在代码执行前会进行通篇编译，先编译成字节码（机器码）。然后在执...

xiongzenghui 2019-08-26 11:40 评论0 收藏0
原生JS大揭秘—同步与异步

摘要：中任务分类同步异步同步任务异步任务中异步类型定时任务网络请求回调函数事件绑定只能传入一个参数未完待续 JS中任务分类同步异步同步任务异步任务 JS中异步类型定时任务网络请求回调函数事件绑定 Promise(resolve只能传入一个参数) 未完待续...

不知名网友 2019-08-22 18:11 评论0 收藏0