博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript this 从此不再疑惑
阅读量:5965 次
发布时间:2019-06-19

本文共 1697 字,大约阅读时间需要 5 分钟。

1. 问题引入

function A() {}A.prototype.fna = function() {    console.log(this);}

我的问题是 fnathis 是指向哪里的?

var a = new A();a.fna();  // A {}var fnt = a.fna;fnt();  // window {...}

再看我们经常遇到的情形

function A() {    this.name = 'A';}A.prototype.fna = function() {    return this.name;}function sayName(fn) {    console.log(fn());}var a = new A();sayName(a.fna); //undefinedsayName(a.fna.bind(a));  //A

这里就是我们平时在写代码的时候为什么要调用 bind 函数来绑定上下文

function A() {    this.fna = function() {        console.log(this);    }}A.prototype.getFna = function() {    return this.fna;}function sayContext(fn) {    fn();}var a = new A();var fna = a.getFna();sayContext(fna);  //window

为什么会有以上这种情况呢,在 javathis 是始终指向调用对象的。是的,始终指向调用对象,调用对象,这个很重要,java 的静态成员是没有 this 的概念的。在 javascriptthis 只和函数的执行环境有关。只有三种情况,在浏览中 window、调用对象、严格模式下的undefined,对应我们开发者来说能接触到的就是以上三者,所以我们可以理解为 函数的执行环境就是以上三者。

2. 确定 this 指向

我们如何确定 this 的指向呢,有很多文章介绍 this 确定指向,方式也有很多种,而我是根据函数的调用形势去判断的,有以下两个判断标准。

1 如果函数的最终调用形式是 fn(); 那么在非严格模式下 this 指向 window 对象,在严格模式下指向 undefined

2 如果是通过对象调用 o.fn(); 这种形式 this 指向对象 o

是的就这两个标准,就这么简单。

3. 通过 callapplybind 深入理解 this

函数调用原型

fn.call(thisArg, arg1, arg2, ...)

fn.apply(thisArg, [argsArray])
fn.bind(thisArg[, arg1[, arg2[, ...]]])

上面这三个函数都是用来改变函数的 this 指向的

1 call 第一个参数是 fnthis 的期望指向,值可以是 对象 或者 undefined,后面的参数是要传递 给 fn 的参数列表

2 apply 第一个参数是 fnthis 的期望指向,值可以是 对象 或者 undefined,后面的值是 fn 的 参数,是一个数组

callapply 功能相同,唯一不同的是选择将参数以 参数列表 传入或者以 数组 传入,都可以,可以互换

使用。调用者两个函数会立即执行 fn,这里是立即执行

3 bind 第一个参数是 fnthis 的期望指向,值可以是 对象 或者 undefined,后面的参数是要传递 给 fn 的参数列表

调用 bind 函数会返回一个函数,这个函数是 fn 的包装,和 fn 的唯一区别是绑定了 this,即 this指向明确。所以 bindcallapply,的区别是 bind 返回一个 this 明确的新函数,callapply立即执行了 fn

到这里我想 javascriptthis 已经说的很清楚了。

转载地址:http://eotax.baihongyu.com/

你可能感兴趣的文章
Asp.net技巧:gridview获取当前行索引的方法
查看>>
让 vim 在按ESC时自动保存
查看>>
git配置别名
查看>>
SpringMVC配置文件
查看>>
划分数系列问题
查看>>
springboot整合jersey
查看>>
Hibernate实体对象的生命周期(三种状态)
查看>>
23. Merge k Sorted Lists
查看>>
Python:pygame游戏编程之旅七(pygame基础知识讲解1)
查看>>
java B转换KB MB GB TB PB EB ZB
查看>>
通过SharpZipLib实现文件夹压缩以及解压
查看>>
20145209预备作业02
查看>>
精通CSS滤镜(filter)
查看>>
ios 中UIViewController的分类
查看>>
弄清楚高层到底是什么情况!
查看>>
开发中常用正则表达式
查看>>
HDU 4374 One hundred layer(单调队列DP)
查看>>
c和c++中NULL和0的区别
查看>>
OPP Services Log
查看>>
JQuery增删改查
查看>>