this 指针详解
概念
this 是以后函数/以后模块的运行环境上下文。是一个指针型变量，一般函数中的 this 是在调用时才被绑定确认指向的。
通过不同的 this 调用同一个函数，能够产生不同的后果。
到底如何确认 this 绑定的内容是什么？
this 绑定的规定
1.默认绑定
function a() {}a();函数独立调用的时候，不带任何润饰的函数援用.
- 非严格模式下 this 指向全局对象
var a = 'hello';var obj = { a: 'world', foo: function () { console.log(this.a); },};let bar = obj.foo;bar(); // hello 在调用的时候是间接调用的。所以是指向全局的this// obj.foo(); // world- 严格模式下，this 指向 undefined，严格模式下，不容许指向全局对象。
var a = 'hello';var obj = { a: 'world', foo: function () { 'use strict'; console.log(this.a); },};let bar = obj.foo;bar(); // 会报错因为this是指向的undefined- 一般函数作为参数传递的状况，setTimeOut,setInterval, 非严格模式下 this 指向全局对象。
var name = 'hello';var person = { name: 'world', sayHi: sayHi,};function sayHi() { console.log(this); // person setTimeout(function () { // 指向了全局对象 console.log(this.name); // hello });}person.sayHi();2.隐式绑定
与默认绑定相同，函数调用的时候有显式的润饰，
var a = 'hello';var obj = { a: 'world', foo: function () { console.log(this.a); },};// 谁调用 这个函数（foo）谁就是这个函数的thisobj.foo();- 在链式调用的状况下，this 就近指向
function sayHi() { console.log(this.name);}var person1 = { name: 'hello', sayHi: sayHi,};var person2 = { name: 'world', friend: person1,};// 链式调用的时候是就近指向person2.friend.sayHi();显式绑定
call apply bind 能够批改函数的 this 指向
call 和 apply 的异同
- 都是扭转 this 指向，而后执行原有函数
- 第一个参数都是作为 this 的，绑定到函数体的 this 上，如果不传参数 fun.cal() , 非严格模式下，this 会绑定到全局对象
func.call(this, arg1, arg2, ..., argn);func.apply(this, [arg1, ..., argn])// 只有object tostring 能够返回类型Object.prototype.toString.call(obj) === '[object Array]'- 如果 call 的第一个参数，传了数字或者字符串等根本类型 会产生什么？
失去字符串的对象，数字的对象 [Number: 1] [String: 'lubai'] 等
bind
bind 办法，会创立一个新的函数，
当这个新函数被调用的时候，bind 的第一个参数会作为函数运行时的 this,之后的一系列参数都会在传递实参前传入作为它的函数.
var account = { name: 'hello', author: 'world', subscribe: function (subsc) { console.log(`${subsc} ${this.name}`); },};account.subscribe('微言'); // 微言 hellovar subsc1 = account.subscribe.bind({ name: 'name', author: 'author' }, 'subsc');subsc1(); // subsc name (显式绑定的优先级，比隐式绑定的优先级高)new
- 创立一个空对象
- 将空对象的\_\_proto\_\_指向原型对象的 prototype
- 以新对象为 this 执行原有的构造函数
- return
function Study(name) { this.name = name;}var study = new Study('hello');console.log(study.name);5. this 绑定的优先级
new 绑定 > 显式(bind, call, apply)绑定 > 隐式绑定(obj.foo()) > 默认绑定(foo())
// 显式绑定的优先级，比隐式绑定高function foo(a) { // console.log(this.a); this.a = a;}var obj1 = { a: 2, foo: foo,};var obj2 = { a: 3, foo: foo,};// 隐式绑定obj1.foo(); // 2obj2.foo(); //3// 将this的指向进行强行更改obj1.foo.call(obj2); // 3obj2.foo.call(obj1); // 2function foo(a) { // console.log(this.a); this.a = a;}var obj1 = { foo: foo,};var obj2 = {};obj1.foo(2);console.log(obj1.a); // 2// 强行把foo的参数指向了obj2上obj1.foo.call(obj2, 3);console.log(obj2.a); // 3// new 将obj1指向bar 相当于 bar.a = a, 并不会扭转obj1这个对象var bar = new obj1.foo(4);console.log(obj1.a); // 2console.log(bar.a); // 4function foo(a) { this.a = a;}var obj1 = {};// bind 执行的this扭转成obj1var bar = foo.bind(obj1);bar(2);console.log(obj1.a); // 2var barNew = new bar(3);// new的过程中，以新对象为this运行原来的构造函数 function foo(a) {this.a = a}// 新对象是 barNewconsole.log(obj1.a); // 2console.log(barNew.a); // 3箭头函数
- 箭头函数没有arguments
- 箭头函数没有构造函数 （自身没有constructor）
- 没有本人的this (this的指向是由定义箭头函数的地位决定的，而一般函数是调用的时候才确定的)
题目练习
题目1
var a = 123;function getA() { console.log(this.a) // undefined}getA()
var a = 123;var obj = { a: 456, getA: function() { // console.log(this) 这里的this指向obj function getAA() { // 外面有独立的this console.log(this.a) // undefined } getAA() // 默认绑定 }}obj.getA() // undefined题目2
var length = 10;function fn() { console.log(this.length)}var obj = { length: 5, method: function(fn) { // this = obj // fn 是一个参数，以函数为参数的 this 指向全局。 fn(); 10 // arguments{0:fn, 1: 1, length:2} 相当于隐式绑定绑定到了fn对象上 arguments[0]() }}obj.method(fn, 1)