[JS] 先bind后new，this的指向

Posted 2023-04-26

参考技术A 非严格模式下，以下调用方式中， this 绑定为全局对象 window ，

而在严格模式下， this 绑定为 undefined 。

值得注意是的，只有 this 处于严格模式中，才会绑定为 undefined ，
与 f 被调用的位置是否处于严格模式无关。

可见 new 对 this 的影响比 bind 优先级要高，
g 虽然通过 bind 绑定了 this 指向的对象为 a:1 ，
但是使用 new g 调用的时候， this 仍然指向以 f 为构造函数的实例。

值得注意的有两点，
（1） bind 之后， g.prototype 为 undefined 。

（2） new g 返回的对象 obj ，使用 instanceof 判断 f 和 g 都为 true ，
原因就在于， V instanceof target 首先会先用 target[Symbol.hasInstance](V) 来判断，
然后再判断， target.prototype 是否在 V 的原型链上，参考 ECMAScript Language Specification

但是 bind 的柯里化作用还是有用的，

使用 call 或者 apply ，将 this 绑定为 null 或 undefined 并不会凑效，
此时， this 将绑定为全局对象。

然而，在严格模式下， this 将绑定为 null 或 undefined ，

值得一提的是，在非严格模式下， f.call(1); 会自动将 1 包装成 new Number(1) ，
然后 this 指向的是这个包装对象。

而在严格模式下， f.call(1); 会将 this 绑定为 1 。

b= 相当于 b=new Object ，因此， b 是 Object 构造函数的实例。
而 Object.create(null) 会创建一个空对象，它没有原型。

注意， Object.create(undefined); 会报错，

赋值表达式的返回值是函数的引用，因此相当于 f() ，
而不是 obj1.f() ，也不是 obj2.f() 。

你不知道的javascript（上卷）

js修改函数内部的this指向(bind,call,apply)

js修改函数内部的this指向

---

 

在调用函数的时候偶尔在函数内部会使用到this,在使用this的时候发现并不是我们想要指向的对象.可以通过bind,call,apply来修改函数内部的this指向.

默认在浏览器下script标签内定义的函数,调用的时候函数内部的this指向window(浏览器窗口对象)

<script>
var a=2
function hello(){
    console.log(this)       
    console.log(this.a)      
}
hello() 
//输出: window => object 
//输出: 2
</script>

　　

使用bind来修改内部的this指向 bind(option) 函数内部的this指向option这个对象

<script>
var a=2
var obj={
    a:"a"
}
function hello(){
    console.log(this)       
    console.log(this.a)    
}
hello=hello.bind(obj)
hello()
//输出: obj => { a:‘a‘ }
//输出: ‘a‘
</script>

　　

使用call来修改内部的this指向 call(option) 函数内部的this指向option这个对象

var a=2
var obj={
    a:"a"
}
function hello(){
    console.log(this)      
    console.log(this.a)     
}
hello.call(obj)
//输出: obj => { a:‘a‘ }
//输出: ‘a‘

　　

使用apply来修改内部的this指向 apply(option) 函数内部的this指向option这个对象

var a=2
var obj={
    a:"a"
}
function hello(){
    console.log(this)      
    console.log(this.a)     
}
hello.apply(obj)
//输出: obj => { a:‘a‘ }
//输出: ‘a‘

　　

bind ,call ,apply 的区别

• bind是只改变函数内部this指向,但不自调用
• call,apply 改变函数内部指向并且自调用
• call第一个参数是需要指向的对象,之后的参数是函数内部的形参可以访问
• apply第一个参数是需要指向的对象,第二个参数是数组格式,函数内部的形参可以访问

//call
var a = 2
var obj={
    a:‘a‘
}
function hello(a, b, c) {
    console.log(this)
    console.log(a, b, c)
}
hello.call(obj,1,2,3)  // { a:‘a‘ }  1,2,3

//apply
var a = 2
var obj={
    a:‘a‘
}
function hello(a, b, c) {
    console.log(this)
    console.log(a, b, c)
}
hello.apply(obj,[1,2],3,4)  // { a:‘a‘ }  1,2,undefind,undefind