192 lines
4.4 KiB
JavaScript
192 lines
4.4 KiB
JavaScript
|
||
|
||
## this
|
||
|
||
解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的 上下文对象。
|
||
|
||
根据函数的调用方式的不同，this会指向不同的对象：【重要】
|
||
|
||
- 1.以函数的形式调用时，this永远都是window。比如`fun();`相当于`window.fun();`
|
||
|
||
- 2.以方法的形式调用时，this是调用方法的那个对象
|
||
|
||
- 3.以构造函数的形式调用时，this是新创建的那个对象
|
||
|
||
- 4.使用call和apply调用时，this是指定的那个对象
|
||
|
||
|
||
**针对第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条的举例**：
|
||
|
||
```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是调用方法的对象
|
||
obj2.sayName();
|
||
|
||
```
|
||
|
||
打印结果：
|
||
|
||
```
|
||
Object
|
||
vae
|
||
```
|
||
|
||
上面的举例可以看出，this指向的是 对象 obj2 ，所以 this.name 指的是 obj2.name。
|
||
|
||
**箭头函数中this的指向**：
|
||
|
||
ES6中的箭头函数并不会使用上面四条标准的绑定规则，而是会继承外层函数调用的this绑定（无论this绑定到什么）。
|
||
|
||
## 类数组 arguments
|
||
|
||
> 这部分，小白可能看不懂。所以，这一段，暂时可以忽略。
|
||
|
||
在调用函数时，浏览器每次都会传递进两个隐含的参数：
|
||
|
||
- 1.函数的上下文对象 this
|
||
|
||
- 2.**封装实参的对象** arguments
|
||
|
||
|
||
例如：
|
||
|
||
```javascript
|
||
function foo() {
|
||
console.log(arguments);
|
||
console.log(typeof arguments);
|
||
}
|
||
|
||
foo();
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
arguments是一个类数组对象，它可以通过索引来操作数据，也可以获取长度。
|
||
|
||
**arguments代表的是实参**。在调用函数时，我们所传递的实参都会在arguments中保存。有个讲究的地方是：arguments**只在函数中使用**。
|
||
|
||
|
||
|
||
|
||
### 1、返回函数**实参**的个数：arguments.length
|
||
|
||
|
||
arguments.length可以用来获取**实参的长度**。
|
||
|
||
举例：
|
||
|
||
```javascript
|
||
fn(2,4);
|
||
fn(2,4,6);
|
||
fn(2,4,6,8);
|
||
|
||
function fn(a,b) {
|
||
console.log(arguments);
|
||
console.log(fn.length); //获取形参的个数
|
||
console.log(arguments.length); //获取实参的个数
|
||
|
||
console.log("----------------");
|
||
}
|
||
```
|
||
|
||
打印结果：
|
||
|
||
|
||
|
||
我们即使不定义形参，也可以通过arguments来使用实参（只不过比较麻烦）：arguments[0] 表示第一个实参、arguments[1] 表示第二个实参...
|
||
|
||
### 2、返回正在执行的函数：arguments.callee
|
||
|
||
arguments里边有一个属性叫做callee，这个属性对应一个函数对象，就是当前正在指向的函数对象。
|
||
|
||
```javascript
|
||
function fun() {
|
||
|
||
console.log(arguments.callee == fun); //打印结果为true
|
||
}
|
||
|
||
fun("hello");
|
||
```
|
||
|
||
在使用函数**递归**调用时，推荐使用arguments.callee代替函数名本身。
|
||
|
||
### 3、arguments可以修改元素
|
||
|
||
之所以说arguments是伪数组，是因为：**arguments可以修改元素，但不能改变数组的长短**。举例：
|
||
|
||
```javascript
|
||
fn(2,4);
|
||
fn(2,4,6);
|
||
fn(2,4,6,8);
|
||
|
||
function fn(a,b) {
|
||
arguments[0] = 99; //将实参的第一个数改为99
|
||
arguments.push(8); //此方法不通过，因为无法增加元素
|
||
}
|
||
|
||
```
|
||
|
||
## 我的公众号
|
||
|
||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||
|
||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||
|
||
|
||
|
||
|