一、this
1、说明
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象
2、举例
var test = {
a : 10,
b : {
a : 12,
fn : function(){
console.log(this.a); //12
}
}
}
test.b.fn();
3、解读
这里同样也是对象test点出来的,但是同样this并没有执行它,那你肯定会说我一开始说的那些不就都是错误的吗?其实也不是,只是一开始说的不准确
情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window(undefined),但是我们这里不探讨严格版的问题。
情况2:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。
情况3:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象。
4、例题解析
var test = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window
}
}
}
var j = test.b.fn;
j();
this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的,例子4中虽然函数fn是被对象b所引用,但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window。
5、当this遇到return
function fn()
{
this.user = '蜡笔小清新';
return function(){};
}
var a = new fn;
console.log(a.user); //undefined
function fn()
{
this.user = '蜡笔小清新';
return 1;
}
var a = new fn;
console.log(a.user); //蜡笔小清新
如果返回值是一个对象(除了null),那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。
二、call/apply
1、说明
- 两者都可以改变this指向
var a = {
user:"蜡笔小清新",
fn:function(){
console.log(this.user); //蜡笔小清新
}
}
var b = a.fn;
b.call(a);
- 任何一个方法都可以.call,其实方法的执行就是方法.call 执行,例如test() 就相当于 test.call()
function test() {
console.log(’蜡笔小清新‘); //蜡笔小清新
}
test.call();
2、用法
function Person(name,age) {
this.name = name;
this.age = age; }
var obj = {};
Person.call(obj);
- call 后边的括号里是可以传东西的,比如传一个 obj 进去,他就会引导着 Person 发生 很大的变化。如果在 Person 底下 new 的话,this 就代表了构造函数所 产生的对象,我们假如说没有new的话,this默认是指向window的,但是我们在call 里传 obj 了,那么这个 this 就不是默认的了,就变成 obj 了,就是 call 里边传谁进 去,this 就是谁。等于说里边现在执行的时候就是 obj.name = name,obj.age = age, 即使是这样,依然可以传参:
Person.call(obj,'小万',20);
现在访问 obj 就得到{name: "小万", age: 20},因为 call 括号里的第一位会改变 this 指向,第一位以后都会当成正常的实参传到形参里边去(null就指向window),所以这里边第二个实参对应 的是函数执行的第一位形参,第三个实参对应的是函数执行的第二位形参。所以 call 的根本原因是改变 this 指向,借用 Person 的执行封装了 obj,借用你的方法来实现我 的功能。
3、示例
function Wheel(wheelSize, style) {
this.wheelSize = wheelSize;
this.style = style;
}
function Sit(c, sitColor) {
this.c = c;
this.sitColor = sitColor;
}
function Model(height, width, len) {
this.height = height;
this.width = width;
this.len = len;
}
function Car(wheelSize, style, c, sitColor, height, width, len) {
Wheel.call(this, wheelSize, style);
Sit.call(this, c, sitColor);
Model.call(this, height, width, len);
}
var car = new Car(100, "魂动之恶魔之眼", "织物", "white", 1800, 1900, 4900);
4、apply
- call 和 apply 基本上是一样的,只是写法不一样,call 需要把实参一个个传进去,但 是 apply 只能传一个值 arguments,即实参列表
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
function Student(name, age, sex, tel, grade) {
Person.apply(this, [name, age, sex]);
this.tel = tel;
this.grade = grade;
}
var student = new Student('小万', 20, 'male', 187, 2017);
三、bind
- bind和call、apply方法不同,实际上bind方法返回的是一个修改过后的函数。
var a = {
user:"蜡笔小清新",
fn:function(){
console.log(this.user); //蜡笔小清新
}
}
var b = a.fn;
var c = b.bind(a);
c();
- 同样bind也可以有多个参数,并且参数可以执行的时候再次添加,但是要注意的是,参数是按照形参的顺序进行的。
var a = {
user:"蜡笔小清新",
fn:function(e,d,f){
console.log(this.user); //蜡笔小清新
console.log(e,d,f); //10 1 2
}
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);