Web/03-JavaScript基础/11-this.md

138 lines
3.0 KiB
Markdown
Raw Normal View History

2019-01-12 17:27:35 +08:00
## this
解析器在调用函数每次都会向函数内部传递进一个隐含的参数这个隐含的参数就是thisthis指向的是一个对象这个对象我们称为函数执行的 上下文对象。
根据函数的调用方式的不同this会指向不同的对象【重要】
- 1.以函数的形式调用时this永远都是window。比如`fun();`相当于`window.fun();`
- 2.以方法的形式调用时this是调用方法的那个对象
- 3.以构造函数的形式调用时this是新创建的那个对象
- 4.使用call和apply调用时this是指定的那个对象
2019-01-12 18:02:13 +08:00
**针对第1条的举例**
```javascript
function fun() {
console.log(this);
console.log(this.name);
}
var obj1 = {
name: "smyh",
sayName: fun
};
var obj2 = {
name: "vae",
sayName: fun
};
var name = "全局的name属性";
//以函数形式调用this是window
fun(); //可以理解成 window.fun()
```
打印结果:
```
Window
全局的name属性
```
上面的举例可以看出this指向的是window对象所以 this.name 指的是全局的name。
**第2条的举例**
2019-01-12 17:27:35 +08:00
```javascript
function fun() {
2019-01-12 18:02:13 +08:00
console.log(this);
2019-01-12 17:27:35 +08:00
console.log(this.name);
}
var obj1 = {
name: "smyh",
sayName: fun
};
var obj2 = {
name: "vae",
sayName: fun
};
var name = "全局的name属性";
//以方法的形式调用this是调用方法的对象
obj2.sayName();
```
2019-01-12 18:02:13 +08:00
打印结果:
```
Object
vae
```
上面的举例可以看出this指向的是 对象 obj2 ,所以 this.name 指的是 obj2.name。
2019-01-12 17:27:35 +08:00
**箭头函数中this的指向**
ES6中的箭头函数并不会使用上面四条标准的绑定规则而是会继承外层函数调用的this绑定无论this绑定到什么
2019-02-02 15:03:27 +08:00
2019-01-12 17:27:35 +08:00
## arguments待定
2019-02-02 15:03:27 +08:00
> 这部分,小白可能看不懂。所以,这一段,可以忽略。
2019-01-12 17:27:35 +08:00
在调用函数时,浏览器每次都会传递进两个隐含的参数:
- 1.函数的上下文对象 this
- 2.**封装实参的对象** arguments
例如:
```javascript
function foo() {
console.log(arguments);
console.log(typeof arguments);
}
foo();
```
![](http://img.smyhvae.com/20180315_0903.png)
arguments是一个类数组对象它也可以通过索引来操作数据也可以获取长度。
在调用函数时我们所传递的实参都会在arguments中保存。
arguments.length可以用来获取**实参的长度**。
我们即使不定义形参也可以通过arguments来使用实参只不过比较麻烦arguments[0] 表示第一个实参、arguments[1] 表示第二个实参...
arguments里边有一个属性叫做callee这个属性对应一个函数对象就是当前正在指向的函数的对象。
```javascript
function fun() {
console.log(arguments.callee == fun); //打印结果为true
}
fun("hello");
```