关于javascript:this揭秘

18次阅读

共计 6197 个字符，预计需要花费 16 分钟才能阅读完成。

搞清楚 this 这种玄学的货色的机制，作用一天然是应酬面试官，作用二就是能够保护他人的烂代码啦~

1 前置常识

1.1 对 this 的一个大误会

很多人对 this 有一个潜意识里的误会——认为 this 的值取决于其所在函数是在哪里申明的

let obj = {a: function () {console.log(this);
    },
    b: function () {
        let f = obj.a;
        f();}
}

obj.b(); // window

很多人在遇到下面这个面试题时，看到函数是在对象外部申明，都会误认为 this 指向 obj

1.2 函数名即指针

函数名 就是指向函数对象的 指针

this 作为一个函数外部的对象，天然与函数严密相连

然而，很多敌人都没搞清楚函数名居然是个指针

看上面的代码，思考问题：

  1. fn1 是否可能间接找到其函数体的地位（ans: 能）
  2. fn1 和 obj 还有关系吗（ans: 无关系）
function fn() {console.log(this);
}
let obj = {a() {return fn;}
}
let fn1 = obj.a();

fn1(); // window

如果下面两个问题你能想明确，或者你对 this 可能指向 window 曾经有肯定的感觉

2 this 机制详解

2.1 this 实质上就是指向它的调用者

javascript作为一门 解释型语言，this 的值到底是什么，必须到函数被调用时能力确定。

什么意思呢，比方上面这段代码

function fn() {console.log(this);
}

请问：你当初晓得 fn 里的 this 是什么吗？

不可能晓得的，因为 fn 没有被调用！

那么什么又叫做 必须到函数被调用时能力确定 呢？

咱们来看看对下面的 fn 进行不同的调用，后果是什么

function fn() {console.log(this);
}
let obj = {fn};

fn(); // window
obj.fn(); // obj

能够很显著地发现，因为调用形式的不同，this 的值也不同

那么 this 实质上就是指向它的调用者 这句话该怎么了解呢？

先别急，整个文章都是围绕这句话开展的

首先，咱们剖析一下一个函数到底有几种调用形式，再别离进行论述：

  1. 全局调用
  2. 办法调用
  3. new 调用

2.1 全局调用(独立调用)

只有遇到 独立调用，根本能够无脑推断该函数外部的this 为 windows

function foo() {console.log(this);
}

foo(); // window

对于 foo() 而言，foo是函数名，而在 js 中，函数名只是一个指针
相似这种 函数名 () 模式，孤零零地独自呈现，《你不晓得的 javascript》作者把这种形式称之为 独立调用 ，而这种调用会使得被调用函数外部的this 默认绑定为window

联合 this 实质上就是指向它的调用者 这句话，全局调用的实质其实就是 window 调用了 foo 这个函数

foo();
// 等价于上面
window.foo();

2.2 办法调用

办法 (method) 指的是某个对象的属性是一个函数，如 obj = {fn:function(){}}，而obj.fn() 叫做 办法调用

联合 this 实质上就是指向它的调用者 这句话：

通过办法调用后，办法内的 this 指向领有该办法的对象

let obj = {fn() {console.log(this);
    }
}

obj.fn(); // obj

2.2.1 办法调用的就近准则

在多个对象嵌套的状况下，this 指向调用它的间隔最近的那一个对象

let obj = {
    a: {
        b: {fn() {console.log(this);
            }
        }
    }
}

obj.a.b.fn(); // obj.a.b

2.2.2 和全局调用进行比照

上面这段代码，在不运行的状况下，很多人都会 猜错

let obj = {a() {console.log(this);
    }
}
let fn = obj.a;

obj.a(); // obj
fn(); // window

置信大家对 obj.a(); 没有疑难，关键在于 fn() 为什么是 window

其实联合 1.2 大节 函数名即指针 一起来看，fn 只是一个指针，当初 fn 指向了 obj.a 这个函数，而 fn() 是一个全局调用，因而 this 天然指向了 window

2.3 new

关键在于记住new 做了哪些事件：

  1. 创建一个长期对象，this 指向该长期对象
  2. 把实例的 __proto__ 指向类的 prototype
  3. return 长期对象
function fn() {console.log(this);
}

new fn(); // 后果看上面的截图

3 其它场景下的 this 解惑

3.1 严格模式下的 this

严格模式下只须要 留神一点 就行，其它状况下与非严格模式雷同

全局作用域里函数中 的 this 是undefined

function test() {
  "use strict"
  console.log(this) 
}
test() // undefined

所以，在应用构造函数时 ， 如果忘了加 new，this 不再指向全局对象，而是报错，因为这就是函数的全局调用

let People = function (name) {
  "use strict"
  this.name = name
}
People() // Cannot set property 'name' of undefined

3.2 数组中的 this

function fn() {console.log(this)
}

arr[fn, fn2, fn3]

arr[0]() // ??

// answer:arr

// 解析
// 数组也是对象的一种
// arr[0]() 能够看做 arr.0().call(arr)

3.3 嵌套函数里的 this

要留神的是：不管 函数名 () 这种模式呈现在哪，都是 独立调用

// 例子一
function fn0() {function fn() {console.log(this);
  }

  fn();}

fn0(); // fn 中 this 是全局变量

// 例子二
let a = {b: function () {console.log(this) // {b:fn}
    function xx() {console.log(this) // window
    }
    xx()}
}
a.b()

3.4 setTimeout、setInterval 中的 this

this 指向全局变量

document.addEventListener('click', function (e) {console.log(this);
    setTimeout(function () {console.log(this); // 这里的 this 是全局变量
    }, 200);
}, false);

3.5 事件中的 this

事件里的 this 指向的是 触发事件的 DOM 节点

document.querySelector('div').addEventListener('click',function (e) {console.log(this) // <div></div>
})

4 本人指定 this

我集体认为，看待 this，应该尽量应用 call/apply/bind 去强制绑定，这样才是上策

4.1 call/apply 和 bind 概览

  1. 咱们要将 call/apply 归为一类 ，bind 独自归为一类
  2. 三者的共同点是都能够指定 this
  3. call/apply 和 bind 都是绑定在 Function 的原型上的，所以 Function 的实例都能够调用这三个办法
Function.prototype.call(this,arg1,arg2)
Function.prototype.apply(this,[arg1,arg2])
Function.prototype.bind(this,arg1,arg2)

4.2 call/apply —— 第一个参数是 this

4.2.1 call/apply 的作用

call和 apply 只有一个区别：call()办法承受的是 若干个参数 ，apply() 办法承受的是一个 蕴含若干个参数的数组
作用：

  1. 调用 函数
  2. 扭转该函数的 this 指向
  3. 给函数 传递参数

返回值
返回值是你调用的函数的返回值

window.a = 1

function print(b, c) {console.log(this.a, b, c)
}

// 独立调用
print(2, 3) // 1 2 3

// 应用 call 和 apply
print.call({a: -1}, -2, -3) // -1 -2 -3
print.apply({a: 0}, [-2, -3]) // 0 -2 -3

4.2.2 apply 传递数组参数

尽管 apply 传递的参数为数组，但实际上 apply 会将这个数组拆开再传递，因而函数承受到的参数是 数组内的元素，而非一个数组

let fn = function () {console.log(arguments)
}

fn.apply(null, [1, 2, [3, 4]]);

因而，apply 经常性的作用之一就是 将数组元素迭代为函数参数

例子一

Math.max()不接管数组的传递，因而如果想要找到一个长度很长的数组的最大值会十分麻烦

咱们能够应用 apply 办法将数组传递给 Math.max()

其本质还是将参数数组拆开再传递给 Math.max()

let answer = Math.max.apply(null, [2, 4, 3])
console.log(answer) // 4

// 留神上面三个等价
Math.max.apply(null, [2, 4, 3])
Math.max.call(null, 2, 4, 3)
Math.max(2, 4, 3)

例子二：合并两个数组

十分值得注意的就是arr2 数组被拆开了，成了一个一个的参数

// 将第二个数组交融进第一个数组
// 相当于 arr1.push('celery', 'beetroot');
let arr1 = ['parsnip', 'potato']
let arr2 = ['celery', 'beetroot']

arr1.push.apply(arr1, arr2)
// 留神！！！this 的意思是要指定调用了 push 这个办法
// 所以当 this = arr1 后
// 就成了 arr1 调用了 push 办法
// 上述表达式等价于 arr1.push('celery', 'beetroot') 

console.log(arr1)
// ['parsnip', 'potato', 'celery', 'beetroot']

当然，在应用 apply 的时候，也肯定要留神是否要对 this 的指向进行绑定，否则可能会报错

Math.max.apply(null, [2, 4, 3]) // 完满运行
arr1.push.apply(null, arr2) // 报错 Uncaught TypeError: Array.prototype.push called on null or undefined

// 阐明
Math = {max: function (values) {// 没用到 this 值}
}

Array.prototype.push = function (items) {
  // this -> 调用 push 办法的数组自身
  // this 为 null 的话，就是向 null 里 push，会报错
  // Array.prototype.push called on null or undefined
}

// 上面三个值是齐全等价的，因为 this 值曾经是 arr1
Array.prototype.push.apply(arr1, arr2)
arr1.push.apply(arr1, arr2)
arr2.push.apply(arr1, arr2)

4.2.3 小测试

function xx() {console.log(this)
}
xx.call('1') // ??
xx() // ??

4.3 bind

fun.bind(thisArg[, arg1[, arg2[, ...]]])

4.3.1 作用

  1. 扭转该函数的 this 指向
  2. 返回 一个 新函数

4.3.2 绑定函数与指标函数

函数应用 bind()办法后会返回一个 新函数【绑定函数】
而 原函数为【指标函数】

我集体更喜爱用 新函数 和原函数 来辨别，因为新名词越多，了解上的艰难越大

那么 新函数被调用时会产生什么呢？
上面一句话务必记住
其实就是把原函数 call/apply 一下，并指定你传递的 this

function xx() {console.log(this)
}

let foo = xx.bind({'name':'jason'})
// foo —— 新函数【绑定函数】// xx —— 原函数【指标函数】foo()

// 新函数调用时对原函数的操作如下(伪代码)
function foo(){xx.call({'name':'jason'})
}

也就是说，实际上，在 foo() 这一句执行时做了如下事件：

1. 给 xx（原函数）指定 this

2. 调用 xx（原函数）
肯定要留神这两步是在新函数被调用时才产生，不调用不产生
你也能够总结为一句话：给原函数 call/apply 了一下

4.3.3 bind()传参

  1. bind(this,arg1,arg2…)会将 arg1,arg2... 插入到 新函数 【绑定函数】的arguments 的 开始地位
  2. 调用新函数 时，再传递的参数也只会跟在 arg1,arg2... 前面
function list() {
    // 原函数【指标函数】return Array.prototype.slice.call(arguments);
}

// 新函数【绑定函数】let leadingThirtysevenList = list.bind(null, 37, 38);

let newList1 = leadingThirtysevenList();
let newList2 = leadingThirtysevenList(1, 2, 3);
let newList3 = leadingThirtysevenList(-1, -2);

console.log(newList1) // [37, 38]
console.log(newList2) // [37, 38, 1, 2, 3]
console.log(newList3) // [37, 38, -1, -2]

4.3.4 应用 this + call/apply 原生实现一个 bind【重点】

思考过程
实现 bind 其实就是实现 bind 的特点

  1. bind 的 第一个参数是 this
  2. bind 能够return 一个新函数，这个新函数能够调用原函数并且能够指定其 this，还能够承受参数
  3. 新函数传递的参数要在 bind 传递的参数的前面

代码

Function.prototype._bind = function () {
    // bind 指定的 this
    let bindThis = arguments[0]
    // bind 传递的参数
    let bindArgs = Array.prototype.slice.call(arguments, 1)
    // this 指向调用_bind 的原函数，即旧函数
    let oldFunction = this

    // 返回的新函数
    return function () {
        // 所谓的新函数和旧函数，函数体一样，实际上只是用 apply 调用了旧函数，再 return 旧函数的返回值

        // 截获调用新函数时传递的参数
        let newArgs = Array.prototype.slice.call(arguments)

        // 合并 bindArgs 和 newArgs，并且 newArgs 要在 bindArgs 前面，再传递给旧函数
        return oldFunction.apply(bindThis, bindArgs.concat(newArgs))
    }
}

// 测试
function fn() {console.log(arguments)
}

let newFn = fn._bind(null, 1, 2);
newFn(4, 6)

正文完
javascript
发表至： javascript
2021-01-28
 0
关于javascript:垃圾回收内存管理
关于javascript:都说二次元程序员很多这个测试揭露真相了快看看准不准
关于javascript:关于施加在-div-标签上的-ngTemplateOutlet-指令让-div-class-丢失的问题调试
关于javascript:js-继承