什么是this?
this就是一个指针,指向我们调用的函数对象,但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用。
函数的不同使用场合,this有不同的值。总的来说,this就是函数运行时所在的环境对象。下面分四种情况,详细讨论this的用法。
this 的使用场景
1、作为一般函数执行
var a = 1;
function test(){
console.log(this.a);
}
test();//1
//在一般函数的情况下,this指向全局对象window
2、作为对象属性执行
var obj = {
name : 'jeck',
age : 18,
sun : function(){
console.log(this.name + '今年' + this.age);
}
}
obj.sun();//jeck今年18
//函数作为对象的一个属性时,称之为对象的方法
//对象方法中的this指代调用此方法的对象
var obj = {
name : 'jeck',
age : 18,
sun : function(){
function add(){
console.log(this.name + '今年' + this.age);
}
add();
}
}
obj.sun();// 今年undefined
//当对象里面有嵌套的函数时此时this指向window
//这里this的指向是window,
//因为window里面有自带的name属性是空字符串所以是空白的没有age属性,
//所以是undefined
3、作为构造函数执行
//构造函数中的this指代通过new新创建的对象
//JS(ES5) 并没有类(class)的概念,而是使用基于原型(prototype)的继承方式
//JS中的构造函数充当了类的角色,如果不使用 new 调用,则和普通函数一样。
//如果作为构造函数正确调用时,构造函数中的this 绑定到新创建的对象上
function Student(name,age){
this.name = name;
this.age = age;
}
var stu = new Student('张三',18);
//执行到这一步this的指向了stu对象
console.log(stu);//Student{name: "张三", age: 18};
console.log(stu.name);//张三
//这里如果直接调用Student()函数不把它new给其他,那么它的this指向的就是全局window
4、通过 call、apply、bind 调用
//JS中函数也是对象(函数对象),也有属性和方法(length、call、apply等)注意,像call和apply这样的方法是定义在原型上的。
//JS中函数可以通过call和apply进行间接调用,动态的指定由谁来调用此函数
//使用方式:函数.apply(参数1,参数2)
//参数1:this的新指向
//参数2:数组,该数组的所有数据被自动展开,传入原函数,可省略
//返回值:原函数的返回值
var a = 0;
var obj = {
name : 'jeck',
age : 18,
sun : function(){
console.log(this.name + '今年' + this.age);
function add(){
console.log(this.name);
}
add.apply(obj);
add.apply();
}
}
obj.sun();
//就是apply里面写哪个对象就指向哪个对象,不写参数就是指向window
//使用方式:函数.call(参数1,参数2…)
//参数1:this的新指向
//后面所有参数:表示向函数中正常传递的实参,可省略,也可以传多个
//返回值:原函数的返回值
function fn(){
console.log(this);
//直接执行的时候就是指向全局
//加上fn.cell()时this指向写的‘hello’就是一个String {"hello"};
}
fn(); //this指向window
fn.call("hello"); //this指向hello
//使用方式:函数.bind(参数1,参数2…)
//参数1: this的新指向
//后面所有参数:表示向函数中正常传递的实参,可省略,也可以传多个
//返回值:修改this指向之后的新函数
function fn(){
console.log(this);
//直接执行的时候就是指向全局
//加上fn.bind()时this指向写的‘hello’就是一个String {"hello"};
}
fn(); //this指向window
var res = fn.bind("hello");
console.log(res); //修改this指向之后的新函数
res(); //执行返回的新函数,this指向hello