首页 >> js开发 >> js代码浅谈JavaScript中this的指向更改
js代码浅谈JavaScript中this的指向更改
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
JS中this指向的更改JS中this指向的更改JS中this指向的更改JavaScript 中 this 的指向问题 前面已经总结过，但在实际开中， 很多场景都需要改变 this 的指向。 现在我们讨论更改 this 指向的问题。this 的指向问题 call更改this指向call更改this指向call 的使用语法：func.call(thisArg, arg1, arg2, ...)call 方法需要一个指定的 this 值（ this要指向的对象 ）和一个或者多个参数。提供的 this 值会更改调用函数内部的 this 指向。
// 使用 call 方法改变调用函数执行上下文的 this 指向
var animal = '小猫';
var times = '15小时';
function greet() {
let str = this.animal + '睡觉时间一般为：' + this.times;
console.log(str);
}
var dogObj = {
animal: '小狗',
times: '8小时'
};
var pigObj = {
animal: '小猪',
times: '13小时'
}
greet(); // 小猫睡觉时间一般为：15小时
greet.call(dogObj); // 小狗睡觉时间一般为：8小时
greet.call(pigObj); // 小猪睡觉时间一般为：13小时
greet.call(); // 小猫睡觉时间一般为：15小时
// 使用 call 方法改变调用函数执行上下文的 this 指向
var animal = '小猫';
var times = '15小时';
function greet() {
let str = this.animal + '睡觉时间一般为：' + this.times;
console.log(str);
}
var dogObj = {
animal: '小狗',
times: '8小时'
};
var pigObj = {
animal: '小猪',
times: '13小时'
}
greet(); // 小猫睡觉时间一般为：15小时
greet.call(dogObj); // 小狗睡觉时间一般为：8小时
greet.call(pigObj); // 小猪睡觉时间一般为：13小时
greet.call(); // 小猫睡觉时间一般为：15小时当直接调用函数 greet 时，函数 greet 内部的 this 指向的是全局对象 Window。函数 greet 调用 call() 方法并传递对象 dogObj 时，函数 greet 内部的 this 就指向了对象 dogObj 。函数 greet 调用 call() 方法并传递对象 pigObj 时，函数 greet 内部的 this 就指向了对象 pigObj 。call()不传参的话，在严格模式下，this 的值将会是 undefined；否则将会指向全局对象 Window。匿名函数调用call方法：
var books = [{
name: 'CSS选择器',
price: 23
}, {
name: 'CSS世界',
price: 35
}, {
name: 'JavaScript语言设计',
price: 55
}];
for (var i = 0; i < books.length; i++) {
(function (i) {
// 这里this指向的是call绑定的数组的每一个元素对象
this.printf = function () {
console.log(`${i} ${this.name}: ￥${this.price}`);
}
this.printf();
}).call(books[i], i);
}
// 打印结果如下：
// 0 CSS选择器: ￥23
// 1 CSS世界: ￥35
// 2 JavaScript语言设计: ￥55
var books = [{
name: 'CSS选择器',
price: 23
}, {
name: 'CSS世界',
price: 35
}, {
name: 'JavaScript语言设计',
price: 55
}];
for (var i = 0; i < books.length; i++) {
(function (i) {
// 这里this指向的是call绑定的数组的每一个元素对象
this.printf = function () {
console.log(`${i} ${this.name}: ￥${this.price}`);
}
this.printf();
}).call(books[i], i);
}
// 打印结果如下：
// 0 CSS选择器: ￥23
// 1 CSS世界: ￥35
// 2 JavaScript语言设计: ￥55call实现继承：
// 实现两个数相加的构造函数
function CalcA(){
this.add = function(a, b){
return a + b;
}
}
// 实现两个数相减的构造函数
function CalcS(){
this.sub = function(a, b){
return a - b;
}
}
// 计算构造函数
function Calc(){
console.log(this); // Calc {}
CalcA.call(this);
CalcS.call(this);
console.log(this); // Calc {add: ƒ, sub: ƒ}
}
var calc = new Calc();
console.log(calc.add(2, 3)); // 5
console.log(calc.sub(10, 1));// 9
// 实现两个数相加的构造函数
function CalcA(){
this.add = function(a, b){
return a + b;
}
}
// 实现两个数相减的构造函数
function CalcS(){
this.sub = function(a, b){
return a - b;
}
}
// 计算构造函数
function Calc(){
console.log(this); // Calc {}
CalcA.call(this);
CalcS.call(this);
console.log(this); // Calc {add: ƒ, sub: ƒ}
}
var calc = new Calc();
console.log(calc.add(2, 3)); // 5
console.log(calc.sub(10, 1));// 9构造函数 Calc 通过 call 方法使构造函数 CalcA、CalcS中的 this 指向了 Calc 自己，从而继承了它们的属性及方法。所以，构造函数 Calc 生成的实例对象也能够访问构造函数 CalcA、CalcS中的属性及方法。apply方法更改this指向apply方法更改this指向apply 的使用语法：func.apply(thisArg, [argsArray])apply 的用法与 call 方法类似，只不过 call 方法接受的是参数列表，而 apply 方法接受的是一个数组或者类数组对象。上面的例子完全可以将 call 更换为 apply，只不过 apply 方法只能接受两个参数，而且第二个参数是一个数组或者类数组对象。bind方法更改this指向bind方法更改this指向bind 的使用语法：func.bind(thisArg, arg1, arg2, ...)bind 的参数与 call 相同，但是 bind 返回的是一个改变this指向后的函数实例。
var petalNum = 100;
function Flower() {
this.petalNum = Math.ceil(Math.random() * 10) + 1;
}
Flower.prototype.declare = function() {
console.log(this);
console.log('this is a beautiful flower with ' + this.petalNum + ' petals');
}
Flower.prototype.bloom = function() {
console.log(this); // Flower {petalNum: 7}
// 如果不绑定 this 就会指向 Window 全局对象
window.setTimeout(this.declare, 1000);
// bind 绑定 this，指向 Flower 的原型对象
window.setTimeout(this.declare.bind(this), 2000);
}
var flower = new Flower();
flower.bloom();
var petalNum = 100;
function Flower() {
this.petalNum = Math.ceil(Math.random() * 10) + 1;
}
Flower.prototype.declare = function() {
console.log(this);
console.log('this is a beautiful flower with ' + this.petalNum + ' petals');
}
Flower.prototype.bloom = function() {
console.log(this); // Flower {petalNum: 7}
// 如果不绑定 this 就会指向 Window 全局对象
window.setTimeout(this.declare, 1000);
// bind 绑定 this，指向 Flower 的原型对象
window.setTimeout(this.declare.bind(this), 2000);
}
var flower = new Flower();
flower.bloom();实例对象 flower 调用 bloom 方法后，bloom 内的 this 指向构造函数的原型对象。1 秒后延迟函数调用构造函数的 declare 方法， 此时执行函数 declare 中的 this 指向 Window 。打印的结果如下：
// Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
// this is a beautiful flower with 100 petals
// Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
// this is a beautiful flower with 100 petals2 秒后延迟函数调用构造函数的 declare 方法，此时执行函数 declare 通过 bind 将 this（构造函数的原型对象）绑定。打印的结果如下：
// 注意，此时petalNum的值时随机取的。
// Flower {petalNum: 7}
// this is a beautiful flower with 7 petals
// 注意，此时petalNum的值时随机取的。
// Flower {petalNum: 7}
// this is a beautiful flower with 7 petals这里将 bind换 成 call，apply 会导致立即执行，延迟效果会失效。ES6的箭头函数更改this指向ES6的箭头函数更改this指向箭头函数中的 this 是在定义函数的时候绑定，而不是在执行函数的时候绑定。 所谓定义时候绑定，就是指 this 是继承自父执行上下文的 this。
var a = 1;
var obj = {
a: 2,
f1: function(){
console.log(this.a)
},
f2: () => {
console.log(this.a)
}
}
obj.f1(); // 2
obj.f2(); // 1
var a = 1;
var obj = {
a: 2,
f1: function(){
console.log(this.a)
},
f2: () => {
console.log(this.a)
}
}
obj.f1(); // 2
obj.f2(); // 1obj.f1() 执行后打印的是 2，这里好理解，obj 调用 f1 函数，那么函数中的 this 就指向调用对象 obj。可以看出，这里 this 是在执行函数的时候绑定的。obj.f2() 执行后打印的是 1。f2 是箭头函数，那么函数中的 this 是继承自父执行上下文的 this。这里箭头函数的父级是对象 obj，obj 的执行上下文就是全局对象 Window，那么箭头函数中的 this 就指向了全局对象了。再看一个例子：
var a = 11;
function test() {
this.a = 22;
let b = () => { console.log(this.a) }
b();
}
test(); // 22
var a = 11;
function test() {
this.a = 22;
let b = () => { console.log(this.a) }
b();
}
test(); // 22 按着定义的理解，应该打印出 11 才对呀，因为箭头函数父级的执行上下文就是 Window 全局对象，此时打印的是全局对象的 a。先不要着急，先慢慢分析，上面的分析是对的，箭头函数的 this 就是指向 Window 对象。test 函数在全局环境下调用时其内部的 this 就指向了全局 Window 对象，代码中的 this.a = 22;就将全局中的 a 重新赋值了，所以箭头函数在全局对象中找到的 a 值就是 22。我们可以在控制台上输入 window.a 查看全局对象中的 a 值，结果打印 22，所以我们就不难理解箭头函数中打印的结果为什么是 22 了。如果将代码中的 this.a = 22; 修改为 var a = 22;，那么箭头函数中打印的结果就是 11 了。 this.a = 22; this.a = 22; var a = 22;箭头函数会继承外层函数调用的 this 绑定，这和 var self = this;的绑定机制一样。箭头函数中，this 指向固定化，箭头函数根本就没有自己的 this， 所以也就不能用作构造函数使用了。var self = this;
// 使用 call 方法改变调用函数执行上下文的 this 指向
var animal = '小猫';
var times = '15小时';
function greet() {
let str = this.animal + '睡觉时间一般为：' + this.times;
console.log(str);
}
var dogObj = {
animal: '小狗',
times: '8小时'
};
var pigObj = {
animal: '小猪',
times: '13小时'
}
greet(); // 小猫睡觉时间一般为：15小时
greet.call(dogObj); // 小狗睡觉时间一般为：8小时
greet.call(pigObj); // 小猪睡觉时间一般为：13小时
greet.call(); // 小猫睡觉时间一般为：15小时
// 使用 call 方法改变调用函数执行上下文的 this 指向
var animal = '小猫';
var times = '15小时';
function greet() {
let str = this.animal + '睡觉时间一般为：' + this.times;
console.log(str);
}
var dogObj = {
animal: '小狗',
times: '8小时'
};
var pigObj = {
animal: '小猪',
times: '13小时'
}
greet(); // 小猫睡觉时间一般为：15小时
greet.call(dogObj); // 小狗睡觉时间一般为：8小时
greet.call(pigObj); // 小猪睡觉时间一般为：13小时
greet.call(); // 小猫睡觉时间一般为：15小时当直接调用函数 greet 时，函数 greet 内部的 this 指向的是全局对象 Window。函数 greet 调用 call() 方法并传递对象 dogObj 时，函数 greet 内部的 this 就指向了对象 dogObj 。函数 greet 调用 call() 方法并传递对象 pigObj 时，函数 greet 内部的 this 就指向了对象 pigObj 。call()不传参的话，在严格模式下，this 的值将会是 undefined；否则将会指向全局对象 Window。匿名函数调用call方法：
var books = [{
name: 'CSS选择器',
price: 23
}, {
name: 'CSS世界',
price: 35
}, {
name: 'JavaScript语言设计',
price: 55
}];
for (var i = 0; i < books.length; i++) {
(function (i) {
// 这里this指向的是call绑定的数组的每一个元素对象
this.printf = function () {
console.log(`${i} ${this.name}: ￥${this.price}`);
}
this.printf();
}).call(books[i], i);
}
// 打印结果如下：
// 0 CSS选择器: ￥23
// 1 CSS世界: ￥35
// 2 JavaScript语言设计: ￥55
var books = [{
name: 'CSS选择器',
price: 23
}, {
name: 'CSS世界',
price: 35
}, {
name: 'JavaScript语言设计',
price: 55
}];
for (var i = 0; i < books.length; i++) {
(function (i) {
// 这里this指向的是call绑定的数组的每一个元素对象
this.printf = function () {
console.log(`${i} ${this.name}: ￥${this.price}`);
}
this.printf();
}).call(books[i], i);
}
// 打印结果如下：
// 0 CSS选择器: ￥23
// 1 CSS世界: ￥35
// 2 JavaScript语言设计: ￥55call实现继承：
// 实现两个数相加的构造函数
function CalcA(){
this.add = function(a, b){
return a + b;
}
}
// 实现两个数相减的构造函数
function CalcS(){
this.sub = function(a, b){
return a - b;
}
}
// 计算构造函数
function Calc(){
console.log(this); // Calc {}
CalcA.call(this);
CalcS.call(this);
console.log(this); // Calc {add: ƒ, sub: ƒ}
}
var calc = new Calc();
console.log(calc.add(2, 3)); // 5
console.log(calc.sub(10, 1));// 9
// 实现两个数相加的构造函数
function CalcA(){
this.add = function(a, b){
return a + b;
}
}
// 实现两个数相减的构造函数
function CalcS(){
this.sub = function(a, b){
return a - b;
}
}
// 计算构造函数
function Calc(){
console.log(this); // Calc {}
CalcA.call(this);
CalcS.call(this);
console.log(this); // Calc {add: ƒ, sub: ƒ}
}
var calc = new Calc();
console.log(calc.add(2, 3)); // 5
console.log(calc.sub(10, 1));// 9构造函数 Calc 通过 call 方法使构造函数 CalcA、CalcS中的 this 指向了 Calc 自己，从而继承了它们的属性及方法。所以，构造函数 Calc 生成的实例对象也能够访问构造函数 CalcA、CalcS中的属性及方法。apply方法更改this指向apply方法更改this指向apply 的使用语法：func.apply(thisArg, [argsArray])apply 的用法与 call 方法类似，只不过 call 方法接受的是参数列表，而 apply 方法接受的是一个数组或者类数组对象。上面的例子完全可以将 call 更换为 apply，只不过 apply 方法只能接受两个参数，而且第二个参数是一个数组或者类数组对象。bind方法更改this指向bind方法更改this指向bind 的使用语法：func.bind(thisArg, arg1, arg2, ...)bind 的参数与 call 相同，但是 bind 返回的是一个改变this指向后的函数实例。
var petalNum = 100;
function Flower() {
this.petalNum = Math.ceil(Math.random() * 10) + 1;
}
Flower.prototype.declare = function() {
console.log(this);
console.log('this is a beautiful flower with ' + this.petalNum + ' petals');
}
Flower.prototype.bloom = function() {
console.log(this); // Flower {petalNum: 7}
// 如果不绑定 this 就会指向 Window 全局对象
window.setTimeout(this.declare, 1000);
// bind 绑定 this，指向 Flower 的原型对象
window.setTimeout(this.declare.bind(this), 2000);
}
var flower = new Flower();
flower.bloom();
var petalNum = 100;
function Flower() {
this.petalNum = Math.ceil(Math.random() * 10) + 1;
}
Flower.prototype.declare = function() {
console.log(this);
console.log('this is a beautiful flower with ' + this.petalNum + ' petals');
}
Flower.prototype.bloom = function() {
console.log(this); // Flower {petalNum: 7}
// 如果不绑定 this 就会指向 Window 全局对象
window.setTimeout(this.declare, 1000);
// bind 绑定 this，指向 Flower 的原型对象
window.setTimeout(this.declare.bind(this), 2000);
}
var flower = new Flower();
flower.bloom();实例对象 flower 调用 bloom 方法后，bloom 内的 this 指向构造函数的原型对象。1 秒后延迟函数调用构造函数的 declare 方法， 此时执行函数 declare 中的 this 指向 Window 。打印的结果如下：
// Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
// this is a beautiful flower with 100 petals
// Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
// this is a beautiful flower with 100 petals2 秒后延迟函数调用构造函数的 declare 方法，此时执行函数 declare 通过 bind 将 this（构造函数的原型对象）绑定。打印的结果如下：
// 注意，此时petalNum的值时随机取的。
// Flower {petalNum: 7}
// this is a beautiful flower with 7 petals
// 注意，此时petalNum的值时随机取的。
// Flower {petalNum: 7}
// this is a beautiful flower with 7 petals这里将 bind换 成 call，apply 会导致立即执行，延迟效果会失效。ES6的箭头函数更改this指向ES6的箭头函数更改this指向箭头函数中的 this 是在定义函数的时候绑定，而不是在执行函数的时候绑定。 所谓定义时候绑定，就是指 this 是继承自父执行上下文的 this。
var a = 1;
var obj = {
a: 2,
f1: function(){
console.log(this.a)
},
f2: () => {
console.log(this.a)
}
}
obj.f1(); // 2
obj.f2(); // 1
var a = 1;
var obj = {
a: 2,
f1: function(){
console.log(this.a)
},
f2: () => {
console.log(this.a)
}
}
obj.f1(); // 2
obj.f2(); // 1obj.f1() 执行后打印的是 2，这里好理解，obj 调用 f1 函数，那么函数中的 this 就指向调用对象 obj。可以看出，这里 this 是在执行函数的时候绑定的。obj.f2() 执行后打印的是 1。f2 是箭头函数，那么函数中的 this 是继承自父执行上下文的 this。这里箭头函数的父级是对象 obj，obj 的执行上下文就是全局对象 Window，那么箭头函数中的 this 就指向了全局对象了。再看一个例子：
var a = 11;
function test() {
this.a = 22;
let b = () => { console.log(this.a) }
b();
}
test(); // 22
var a = 11;
function test() {
this.a = 22;
let b = () => { console.log(this.a) }
b();
}
test(); // 22 按着定义的理解，应该打印出 11 才对呀，因为箭头函数父级的执行上下文就是 Window 全局对象，此时打印的是全局对象的 a。先不要着急，先慢慢分析，上面的分析是对的，箭头函数的 this 就是指向 Window 对象。test 函数在全局环境下调用时其内部的 this 就指向了全局 Window 对象，代码中的 this.a = 22;就将全局中的 a 重新赋值了，所以箭头函数在全局对象中找到的 a 值就是 22。我们可以在控制台上输入 window.a 查看全局对象中的 a 值，结果打印 22，所以我们就不难理解箭头函数中打印的结果为什么是 22 了。如果将代码中的 this.a = 22; 修改为 var a = 22;，那么箭头函数中打印的结果就是 11 了。 this.a = 22; this.a = 22; var a = 22;箭头函数会继承外层函数调用的 this 绑定，这和 var self = this;的绑定机制一样。箭头函数中，this 指向固定化，箭头函数根本就没有自己的 this， 所以也就不能用作构造函数使用了。var self = this;
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
