1.new关键字
<script> //构造函数版this function Fn() { this.user = "yaya"; } var a = new Fn(); console.log(a.user); //yaya </script>
用变量a创建了一个Fn的实例(相当于复制了一份Fn到对象a里面),此时仅仅只是创建,并没有执行,而调用这个函数Fn的是对象a,那么this指向的自然是对象a,那么为什么对象a中会有user,因为你已经复制了一份Fn函数到对象a中,用了new关键字就等同于复制了一份
2. call()
<script> var a = { user: "yaya", fn: function () { console.log(this.user); //yaya } } var b = a.fn; b.call(a); //若不用call,则b()执行后this指的是Window对象 </script>
使用call上下文调用的时候this指向的是传入的第一个参数(apply也一样)
call方法除了第一个参数以外还可以添加多个参数,如下:
<script> var a = { user: "yaya", fn: function (num1, num2) { console.log(this.user); //yaya console.log(num1 + num2); //3 } } var b = a.fn; b.call(a, 1, 2); </script>
3:apply()
<script> var a = { user: "yaya", fn: function () { console.log(this.user); //yaya } } var b = a.fn; b.apply(a); </script>
使用apply上下文调用的时候this指向的是传入的第一个参数(同call也一样)
也可以有多个参数,但是不同的是,apply第二个参数必须是一个数组,如下:
<script> var a = { user: "yaya", fn: function (num1, num2) { console.log(this.user); //yaya console.log(num1 + num2); //11 } } var b = a.fn; b.apply(a, [10, 1]); </script>
<script> //注意如果call和apply的第一个参数写的是null,那么this指向的是window对象 var a = { user: "yaya", fn: function () { console.log(this); //Window } } var b = a.fn; b.apply(null); </script>
4.bind()
<script> var a = { user: "yaya", fn: function () { console.log(this.user); } } var b = a.fn; b.bind(a); //代码没有被打印 </script>
我们发现代码没有被打印,对,这就是bind和call、apply方法的不同,实际上bind方法返回的是一个修改过后的函数。
<script> var a = { user: "yaya", fn: function () { console.log(this.user); } } var b = a.fn; var c = b.bind(a); console.log(c); // ƒ () {console.log(this.user);} </script>
函数c看看,能不能打印出对象a里面的user
<script> var a = { user: "yaya", fn: function () { console.log(this.user); //yaya } } var b = a.fn; var c = b.bind(a); c(); </script>
同样bind也可以有多个参数,并且参数可以执行的时候再次添加,但是要注意的是,参数是按照形参的顺序进行的。
<script> var a = { user: "yaya", fn: function (e, d, f) { console.log(this.user); //yaya console.log(e, d, f); //10 1 2 } } var b = a.fn; var c = b.bind(a, 10); c(1, 2); </script>
call和apply都是改变上下文中的this并立即执行这个函数,bind方法可以让对应的函数想什么时候调就什么时候调用,并且可以将参数在执行的时候添加,这是它们的区别