this对象的几种情况
解析器在调用函数每次都会向函数内部传递进一个隐含的参数, 这个隐含的参数就是this,this指向的是一个对象,这个对象我们称为函数执行的 上下文对象,根据函数的调用方式的不同,this会指向不同的对象
* 1.以函数的形式调用时,this永远都是window
* 2.以方法的形式调用时,this就是调用方法的那个对象
* 3.以构造函数的形式调用时,this是新创建的那个对象
* 4.通过call()或apply()改变函数执行环境的情况况下,this就会指向其他对象
分别举例说明this的几种调用方式;
1.this以函数形式调用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// 1.以函数的形式调用时,this永远都是window
function fun(){
console.log(this.name);
}
var name = "全局的name属性";
fun();//以函数形式调用,this是window
//控制台输出"全局的name属性”
</script>
</head>
<body>
</body>
</html>
2.this以方法形式调用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//2.以方法的形式调用时,this就是调用方法的那个对象
function fun(){
console.log(this.name);
}
//创建一个对象
var obj = {
name:"孙悟空",
sayName:fun
};
var obj2 = {
name:"沙和尚",
sayName:fun
};
var name = "全局的name属性";
obj.sayName();
obj2.sayName();
//以方法的形式调用,this是调用方法的对象
//控制台输出:孙悟空 沙和尚
</script>
</head>
<body>
</body>
</html>
3.this以构造函数的形式调用
构造函数就是一个普通的函数,创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写, 构造函数和普通函数的区别就是调用方式的不同,普通函数是直接调用,而构造函数需要使用new关键字来调用。
构造函数的执行流程:
* 1.立刻创建一个新的对象
* 2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
* 3.逐行执行函数中的代码
* 4.将新建的对象作为返回值返回
使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类。我们将通过一个构造函数创建的对象,称为是该类的实例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// 3.当以构造函数的形式调用时,this就是新创建的那个对象
function Person(name , age , gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function(){
alert(this.name);
};//这里的this是每次创建的对象
}
function Dog(){
}
var per = new Person("孙悟空",18,"男");//这里this.name="孙悟空"
var per2 = new Person("玉兔精",16,"女");//这里this指的对象是per2
var per3 = new Person("奔波霸",38,"男");//这里this指的是per3
</script>
</head>
<body>
</body>
</html>
4.使用call和apply调用时
call()和apply()
这两个方法都是函数对象的方法,需要通过函数对象来调用,当对函数调用call()和apply()都会调用函数执行。在调用call()和apply()可以将一个对象指定为第一个参数,此时这个对象将会成为函数执行时的this,call()方法可以将实参在对象之后依次传递, apply()方法需要将实参封装到一个数组中统一传递
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var obj = {
name: "obj",
sayName:function(){
alert(this.name);
}
};//创建一个对象,叫obj
obj.sayName();//输出“obj”
// 4.使用call和apply调用时,this是指定的那个对象
var obj2 = {
name: "obj2"
};//创建一个对象叫obj2
obj.sayName.apply(obj2);//通过apply()方法传入一个对象obj2
//输出“obj2”
</script>
</head>
<body>
</body>
</html>