js的call和this指向系列

2024-06-10 04:48

文章标签 js 系列 call 指向

本文主要是介绍js的call和this指向系列，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在我理解call主要有2层意思

实现继承：

继承属性和方法
```
function Fun1(sex) {this.sex = sex,this.say = function() {console.log(this.sex);}
}function Fun2(sex) {//this.sex = 'female';// #1Fun1.call(this, sex);//this.sex = 'female';// #2
}var f2 = new Fun2("male");
f2.say();// male
```
(1) 以上Fun2继承了Fun1的所有属性和方法，所以Fun2的实例f2可以调用say方法输出male。 (2) 如果仅取消注释#1，将输出male，如果仅取消注释#2，将输出female，请体会其中区别

组合继承

function A() {this.name = 'a'
}A.prototype = {say() {console.log(this.name)}
}function B() {A.call(this)// 构造函数继承
}B.prototype = Object.create(A.prototype)// 原型继承
B.prototype.constructor = B// 改变constructor指向var b = new B()b.say()// a
console.log(b.constructor)// B

改变this指向

关于this

var sex = 'male';
function Foo() {console.log(this.sex);
}
Foo();// => male // 直接调用，Foo就是普通函数，所以Foo内部的this指向的就是全局(因为函数本身也是挂载到window下面的)，可以向上搜索到male
Foo.call({sex: 'female'});// female // 同上，但是使用call改变this指向到了传入的对象，所以输出female
var f = new Foo();// undefined // new关键字生成实例f，Foo就是构造函数，所以Foo内部的this指向实例f本身，f是没有sex这个属性的，输出undefined

var a = 10function foo() {a = 100console.log(a)console.log(this.a)// 被当做普通函数调用，this指向全局)var a// 变量提升
}
foo()// 100 10

简单示例

function Fun1() {this.sex= "male",this.say = function() {console.log(this.sex);}
}function Fun2() {this.sex= "female";
}var f1 = new Fun1();
var f2 = new Fun2();f1.say();// male
f1.say.call(f2);// female // f1.say调用时的this指向被改成了指向f2，所以输出**female**(注意这里并不是继承，f2也没有say这个方法，f2.say()是会报错的)

深入示例

function foo(cb) {var self = this;this.sex = 'male';setTimeout(function() {cb && cb.call(self, 22);// 在这里调用回调函数cb时，this指向foo这个构造函数本身})
}
var f = new foo(function(age) {console.log(this.sex, age);// male 22
})

function Foo() {this.sex = 'male';this.say = function() {setTimeout(function() {console.log(this.sex);// 定时器普通回调函数中的this指向window}, 0)}this.speak = function() {setTimeout(() => {console.log(this.sex);// 箭头函数没有自己的this，它的this继承自外部函数的作用域。所以，定时器箭头回调函数中的this指向构造函数Foo本身}, 0)}
}
var f = new Foo()
f.say()// undefined
f.speak()// male