首先，需要明确，call()、apply()、bind()这三个方法的作用都是 改变this指向
它们之间的不同点在于：
call和apply是直接调用的，而bind不会立即调用，需要手动调用（原因在于bind返回的是一个改变了this指向的函数，所以需要手动调用）
call和bind的第二个参数都是以参数列表的形式（可多次传入），而apply的第二个参数需要以数组的方式（一次传入）
相同点：
都能够改变this的指向
第一个参数都是 this要指向的参数
都可以利用后续参数传参
在非严格模式下，如果第一个参数是null或者undefined，会把全局对象(浏览器是window)作为this的值。 而在严格模式下，null是null，undefined是undefined。
先用一个例子，看看三者的用法
var year = 2022
function getDate(month, day) {
return this.year + '-' + month + '-' + day
}
let obj = {year: 2023}
getDate.call(null, 3, 8) //2022-3-8
getDate.call(obj, 3, 8) //2023-3-8
getDate.apply(obj, [3, 8]) //2023-3-8
getDate.bind(obj)(3, 8) //2023-3-8可以看到，call和bind传参都是参数列表的形式，而apply是以数组的形式一次性传入。 而bind的特殊在于它首先改变了this的指向，改为obj，然后返回改变指向后的函数，所以需要再调用一次，这个时候进行传参。
传入null时，this指向全局对象，所以year为2022。而传入obj后，this的指向改为了obj，所以year值为2023
接着通过几个例子，再加强一下理解
var name = 'Eric',age = 17;
var obj = {
name: 'Tom',
objAge: this.age,
myFun: function(){
console.log(this.name + "年龄" + this.age);
}
}
console.log(obj.objAge) // 17
obj.myFun() // Tom年龄undefinedvar username = 'Jerry';
function shows(){
console.log(this.username);
}
shows() // Jerry这两个例子，一个是指向obj，一个是指向window
如果使用这三种方法改变this指向呢?
var name = 'Eric',age = 17;
var obj = {
name: 'Tom',
objAge: this.age,
myFun: function(){
console.log(this.name + "年龄" + this.age);
}
}
var you = {
name: 'LaLa',
age: 30
}
obj.myFun.call(you); // LaLa年龄30
obj.myFun.apply(you); // LaLa年龄30
obj.myFun.bind(you)(); // LaLa年龄30三者都改变了this的指向，不过call和apply是立即调用，bind是需要调用一次的
var name = 'Eric',age = 17;
var obj = {
name: 'Tom',
objAge: this.age,
myFun: function(from,to){
console.log(this.name + ",年龄" + this.age + ",来自" + from + ",去往" + to);
}
}
var you = {
name: 'LaLa',
age: 30
}
obj.myFun.call(you,'南京','上海'); // LaLa,年龄30,来自南京,去往上海
obj.myFun.apply(you,['南京','上海']); // LaLa,年龄30,来自南京,去往上海
obj.myFun.bind(you,'南京','上海')(); // LaLa,年龄30,来自南京,去往上海
obj.myFun.bind(you,['南京','上海'])(); // LaLa,年龄30,来自南京,上海,去往undefined同样，都可以接收到两个参数。最后才测试了一下如果bind也用这种数组形式一次性传递，其实它是只对应from形参的
到这，大概对三者应该有一定的区别能力了。然后就可以了解一下各自的应用场景
call和apply的应用场景
a、函数间相互调用
function add(a,b){
console.log(a+b)
}
function sub(a,b){
console.log(a-b);
}
add.call(sub,5,6); // 11
add.apply(sub,[5,6]); // 11在这里，乍一看很奇怪，add和sub都是函数，其实是把函数当成了Function对象
b、构造函数之间的调用
function Person(){
this.age = 50;
this.showAge= function(){
console.log(this.age);
}
}
function Son(){
this.age = 20;
}
var father = new Person();
var xiaoming = new Son();
father.showAge.apply(xiaoming) //20
father.showAge.call(xiaoming) //20
xiaoming.showAge(); //报错，showAge() is not a function如果这样写呢?
function Person(){
this.age = 50;
this.showAge= function(){
console.log(this.age);
}
}
// 让Son也具有Person的方法
function Son(){
this.age = 20;
Person.call(this);
}
var father = new Person();
var xiaoming = new Son();
father.showAge.apply(xiaoming) // 50
father.showAge.call(xiaoming) // 50
xiaoming.showAge(); // 50这里可以理解为改变了2次，第一次this指向xiaoming，他是Son，但是Son内部的Person.call(this)使得this又拥有了Father的方法，我们在Son中输出this，可以得到
c、利用apply进行拼接
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
[].push.apply(arr1, arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6]d、利用call判断数据类型
var arr = [1, 2, 3];
var arr1 = 'qwer';
console.log(Object.prototype.toString.call(arr)); // [object Array]
console.log(Object.prototype.toString.call(arr1)); // [object String]bind的应用场景
配合setTimeout使用
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = fn;
}
function fn() {
setInterval(function () {
console.log(this.innerText)
}.bind(this), 1000) //this指向事件源lis[i]
}
</script>源码实现
call源码实现：
Function.prototype.myCall = function(context) {
if(typeof this != 'function') { // 容错处理 防止调用这个方法的对象不是函数
throw new TypeError('Error');
}
context = context || window;
context.fn = this; // this指向 谁调用这个函数this就指向谁
const args = [...arguments].slice(1); // 参数
const result = context.fn(...args);
delete context.fn;
return result; // 返回一个对象
}
// 测试
function Person(){
this.age = 50;
this.showAge= function(){
console.log(this.age);
}
}
// 让Son也具有Person的方法
function Son(){
this.age = 20;
Person.myCall(this);
}
var father = new Person();
var xiaoming = new Son();
father.showAge.apply(xiaoming) // 50
father.showAge.myCall(xiaoming) // 50
xiaoming.showAge(); // 50apply源码实现
Function.prototype.myApply = function(context) {
console.log(arguments);
if(typeof this != 'function') { // 容错处理 防止调用的这个对象不是函数
throw TypeError('error');
}
context = context || window;
context.fn = this;
var result;
if(arguments[1]) {
result = context.fn(...arguments[1]);
}else {
result = context.fn();
}
delete context.fn;
return result;
}
// 测试用例
function Father(name, price) {
this.name = name;
this.price = price;
}
function Son(name, price) {
Father.myApply(this, [name, price]);
this.age = 18;
}
var son = new Son('banana', 5);
console.log(son.name);bind源码实现
// 1. 函数A调用bind方法 需要传递的参数o, x, y, z...
// 2. 返回新的函数B
// 3. 函数B在执行的时候 具体的功能实现实际上还是使用的A 只不过this指向变成了o 不传是window
// 4. 函数B在执行的时候 你传递参数 会拼接到x, y, z的后面 一并在内部传递给A执行
// 5. 当你以new B() 构造函数依旧是A 而且obj这个参数不会起到任何操作
Function.prototype.myBind = function(target) {
var self = this;
var args = [].slice.call(arguments, 1);
var temp = function() {};
var f = function() {
var _args = [].slice.call(arguments, 0);
return self.apply(this instanceof temp ? this : (target || window), args.concat(_args));
}
temp.prototype = self.prototype;
f.prototype = new temp();
return f;
}
// 测试
function get() {
return this.x;
}
var module = {
x: 18
}
var getX = get.myBind(module);
getX();
![[ IFRS 17 ] 新准则下如何确认保险合同](https://img-blog.csdnimg.cn/bbe924c65ddd4e80ba2b954a1cd2020b.png)
