this的指向

this的指向

call()、apply()

call()、apply() 调用时候,修改this,只有当次调用修改,不影响函数本身this

call(obj)、apply(obj) 运行即调用

let obj1 = {
    name: 'obj1',
    fn() {
        console.log(this.name)
    }
}
let obj2 = {name: 'obj2'}
let newFn = obj1.fn
newFn.call(obj2)	// obj2
newFn.apply(obj2)	// obj2
obj1.fn()		// obj1
newFn()			// 打印为空,此时this指向window, 初始时 window.name=''
复制代码

bind()

bind(obj) 返回一个函数 需再次调用 ➡ bind(obj)()

//  接着上面代码
newFn.bind(obj2)()	// obj2
复制代码

与call()、apply()的不同

let obj1 = {
    name: 'obj1',
    fn() {
        console.log(this.name)
    }
}
let obj2 = {name: 'obj2'}
let newFn = obj1.fn.bind(obj2)
newFn()             //  obj2
newFn.call(obj1)    //  obj2
复制代码

运行一次bind()后的 newFn,是一个bound function,简称绑定函数 MDN的详细说明

  • TargetFunction:bind前的的函数
  • BoundThis:绑定的this指向
  • BoundArgs:传入的其它参数了。

当我们执行newFn时,就有点类似于TargetFunction.apply(BoundThis,BoundArgs)。

所以,当执行绑定函数时,this指向与形参在bind方法执行时已经确定了,无法改变。除非再次使用bind(obj)修改this

参数

call(this,arg1,arg2)
apply(this,[arg1,arg2])
bind(this,arg1,arg2)()

// 当this为null、undefined,this指向window
复制代码

构造器调用模式

function Dog(name, age){
    // 这里的this都是指向实例
    this.name  = name
    this.age = age
    this.sayAge = function(){
        console.log(this.age)
    }
}
var myDog = new Dog('多多', 8);
myDog.sayAge()   // 8
console.log
	myDog.__proto__.constructor 	// Dog
	myDog instanceof Dog 		// true
//   new一个函数时,同时 this 会被绑定到那个新对象上
复制代码

ES6 的箭头函数

箭头函数的 this 始终指向函数定义时的 this,而非执行时

箭头函数中没有 this 绑定,必须通过查找作用域链来决定其值,如果箭头函数被非箭头函数包含,则 this 绑定的是最近一层非箭头函数的 this,否则,this 为 undefined

var obj = {
    name : "多多",
    fn1: function () {
        console.log(this.name)
    },
    fn2: function () {
        setTimeout( () => {
            this.fn1()
        },100)
    }
}
obj.fn2()     // 多多
复制代码

使用场景

   
求数组中的最大和最小值 var arr = [1, 2, 3, 89, 46];
var max = Math.max.apply(null, arr); // 89
var min = Math.min.apply(null, arr); // 1
将类数组转为数组 var trueArr = Array.prototype.slice.call( arrayLike );
数组追加 var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var total = [].push.apply(arr1, arr2); // 6
// arr1 = [1, 2, 3, 4, 5, 6]
// arr2 = [4, 5, 6]
判断变量类型 function isArray(obj){
return Object.prototype.toString.call(obj) == '[Object Array]';
}
// isArray([]) => true
// isArray('yw') => false
上一篇:所有类的父类 Java Object


下一篇:新增的对象字面量语法