目录
1.作为对象的方法调用:
当函数作为对象的方法被调用时,this指向该对象
var obj = {
a: 'yuguang',
getName: function(){
console.log(this === obj);
console.log(this.a);
}
};
obj.getName(); // true yuguang
2.作为普通函数调用
当函数不作为对象的属性被调用,而是以普通函数的方式,this总是指向全局对象(在浏览器中,通常是Window对象)
window.name = 'yuguang';
var getName = function(){
console.log(this.name);
};
getName(); // yuguang
window.name = '老王'
var obj = {
name: 'yuguang',
getName: function(){
console.log(this.name);
}
};
var getNew = obj.getName;
getNew(); // 老王 getNew重新定义一个函数,我window下的,this是windeow
3.构造器调用
var MyClass = function(){
this.name = 'yuguang';
}
var obj = new MyClass();
console.log(obj.name)//yuguang
var MyClass = function () {
this.name = 1;
this.age=13;
return {
name: 2
}
}
var myClass = new MyClass();
console.log('myClass:', myClass); // {name: 2} return的函数会直接覆盖掉age属性
4、call或apply调用
跟普通的函数调用相比,用call和apply可以动态的改变函数的this
var obj1 = {
name: 1,
getName: function (num = '') {
return this.name + num;
}
};
var obj2 = {
name: 2,
};
// 可以理解成在 obj2的作用域下调用了 obj1.getName()函数
console.log(obj1.getName()); // 1
console.log(obj1.getName.call(obj2, 2)); // 2 + 2 = 4
console.log(obj1.getName.apply(obj2, [2])); // 2 + 2 = 4
5.箭头函数
箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。
因此,在下面的代码中,传递给getVal函数内的this并不是调用者自身,而是外部的this~
this.val = 2;
var obj = {
val: 1,
getVal: () => {
console.log(this.val);
}
}
obj.getVal(); // 2
var obj = {
name: '1',
getName: function (params) {
console.log(this.name)
}
};
obj.getName();
var getName2 = obj.getName;
getName2();
// 1
// undefined
6.call和apply
(1)介绍:
先来看区别,是因为它们几乎没有区别,下文代码实例call和apply都可以轻易的切换。
当它们被设计出来时要做到的事情一摸一样,唯一的区别就在于传参的格式不一样
apply接受两个参数:
第一个参数指定了函数体内this对象的指向
第二个参数为一个带下标的参数集合(可以是数组或者类数组)
call接受的参数不固定:
第一个参数指定了函数体内this对象的指向
第二个参数及以后为函数调用的参数
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 });
// id: 42
(2)call和apply能做什么?
使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数
-
- 调用构造函数来实现继承;
- 调用函数并且指定上下文的 this;
- 调用函数并且不指定第一个参数
1.调用构造函数来实现继承
function Product(name, price) {
this.name = name;
this.price = price;
}
function Food(name, price) {
Product.call(this, name, price); //
this.category = food;
}
var hotDog = new Food('hotDog', 20);
2.调用函数并且指定上下文的 this
function showName() {
console.log(this.id + ':' + this.name);
};
var obj = {
id: 1,
name: 'yuguang'
};
showName.call(obj)
7.例题:
(1)
var dev='efb'
const obj = {
dev: 'bfe',
a: function() {
return this.dev
},
b() {
return this.dev
},
c: () => {
return this.dev
},
d: function() {
return (() => {
return this.dev
})()
},
e: function() {
return this.b()
},
f: function() {
return this.b
},
g: function() {
return this.c()
},
h: function() {
return this.c
},
i: function() {
return () => {
return this.dev
}
}
}
console.log(obj.a())
console.log(obj.b())
console.log(obj.c())
console.log(obj.d())
console.log(obj.e())
console.log(obj.f()())
console.log(obj.g())
console.log(obj.h()())
console.log(obj.i()())
//严格状态下:
// bfe
// bfe
// undefined 箭头函数this=>window
// bfe 直接调用
// bfe
// undefined
// undefined 箭头函数
// undefined
// bfe
//非严格状态下:
//undefined全换成efd
结束!
太务实会使人身心疲惫,缺乏精神上的价值;太务虚很多时候不能做好事情,缺乏物质上的价值。
怎样平衡好务实和务虚呢?