update:伪数组arguments
This commit is contained in:
parent
d0841f9a94
commit
8f4d5e7524
@ -89,10 +89,9 @@
|
|||||||
|
|
||||||
ES6中的箭头函数并不会使用上面四条标准的绑定规则,而是会继承外层函数调用的this绑定(无论this绑定到什么)。
|
ES6中的箭头函数并不会使用上面四条标准的绑定规则,而是会继承外层函数调用的this绑定(无论this绑定到什么)。
|
||||||
|
|
||||||
|
## 类数组 arguments
|
||||||
|
|
||||||
## arguments(待定)
|
> 这部分,小白可能看不懂。所以,这一段,暂时可以忽略。
|
||||||
|
|
||||||
> 这部分,小白可能看不懂。所以,这一段,可以忽略。
|
|
||||||
|
|
||||||
在调用函数时,浏览器每次都会传递进两个隐含的参数:
|
在调用函数时,浏览器每次都会传递进两个隐含的参数:
|
||||||
|
|
||||||
@ -100,6 +99,7 @@ ES6中的箭头函数并不会使用上面四条标准的绑定规则,而是
|
|||||||
|
|
||||||
- 2.**封装实参的对象** arguments
|
- 2.**封装实参的对象** arguments
|
||||||
|
|
||||||
|
|
||||||
例如:
|
例如:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@ -111,19 +111,47 @@ ES6中的箭头函数并不会使用上面四条标准的绑定规则,而是
|
|||||||
foo();
|
foo();
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
![](http://img.smyhvae.com/20180315_0903.png)
|
![](http://img.smyhvae.com/20180315_0903.png)
|
||||||
|
|
||||||
arguments是一个类数组对象,它也可以通过索引来操作数据,也可以获取长度。
|
|
||||||
|
|
||||||
在调用函数时,我们所传递的实参都会在arguments中保存。
|
|
||||||
|
arguments是一个类数组对象,它可以通过索引来操作数据,也可以获取长度。
|
||||||
|
|
||||||
|
**arguments代表的是实参**。在调用函数时,我们所传递的实参都会在arguments中保存。有个讲究的地方是:arguments**只在函数中使用**。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 1、返回函数**实参**的个数:arguments.length
|
||||||
|
|
||||||
|
|
||||||
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("----------------");
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
打印结果:
|
||||||
|
|
||||||
|
![](http://img.smyhvae.com/20180125_2140.png)
|
||||||
|
|
||||||
我们即使不定义形参,也可以通过arguments来使用实参(只不过比较麻烦):arguments[0] 表示第一个实参、arguments[1] 表示第二个实参...
|
我们即使不定义形参,也可以通过arguments来使用实参(只不过比较麻烦):arguments[0] 表示第一个实参、arguments[1] 表示第二个实参...
|
||||||
|
|
||||||
|
### 2、返回正在执行的函数:arguments.callee
|
||||||
|
|
||||||
arguments里边有一个属性叫做callee,这个属性对应一个函数对象,就是当前正在指向的函数的对象。
|
arguments里边有一个属性叫做callee,这个属性对应一个函数对象,就是当前正在指向的函数对象。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
function fun() {
|
function fun() {
|
||||||
@ -134,6 +162,23 @@ arguments里边有一个属性叫做callee,这个属性对应一个函数对
|
|||||||
fun("hello");
|
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); //此方法不通过,因为无法增加元素
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
## 我的公众号
|
## 我的公众号
|
||||||
|
|
||||||
|
@ -184,23 +184,14 @@ array = Array.from(arrayLike)
|
|||||||
|
|
||||||
## 其他
|
## 其他
|
||||||
|
|
||||||
### instanceof:判断是否为数组
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
布尔类型值 = A instanceof B;
|
|
||||||
```
|
|
||||||
|
|
||||||
解释:判断A是否为B类型(instanceof 是一个关键字)。
|
|
||||||
|
|
||||||
在数组里,这种方法已经用的不多了,因为有下面这种方法。
|
|
||||||
|
|
||||||
### isArray():判断是否为数组
|
### isArray():判断是否为数组
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
布尔类型值 = Array.isArray(被检测的值) ;
|
布尔值 = Array.isArray(被检测的值) ;
|
||||||
```
|
```
|
||||||
|
|
||||||
PS:属于HTML5中新增的方法。
|
以前,我们会通过 `A instanceof B`来判断 A 是否属于 B 类型。但是在数组里,这种 instanceof 方法已经用的不多了,因为有下面isArray()方法。
|
||||||
|
|
||||||
|
|
||||||
### toString():转换数组
|
### toString():转换数组
|
||||||
|
|
||||||
@ -218,50 +209,6 @@ PS:属于HTML5中新增的方法。
|
|||||||
|
|
||||||
这个方法的意义不大。因为我们指直接写数组对象的名字,就已经是数组本身了。
|
这个方法的意义不大。因为我们指直接写数组对象的名字,就已经是数组本身了。
|
||||||
|
|
||||||
## 伪数组:arguments
|
|
||||||
|
|
||||||
arguments代表的是实参。有个讲究的地方是:arguments**只在函数中使用**。
|
|
||||||
|
|
||||||
(1)返回函数**实参**的个数: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("----------------");
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
打印结果:
|
|
||||||
|
|
||||||
![](http://img.smyhvae.com/20180125_2140.png)
|
|
||||||
|
|
||||||
(2)返回正在执行的函数:arguments.callee
|
|
||||||
|
|
||||||
在使用函数**递归**调用时,推荐使用arguments.callee代替函数名本身。
|
|
||||||
|
|
||||||
(3)之所以说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); //此方法不通过,因为无法增加元素
|
|
||||||
}
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## 清空数组
|
## 清空数组
|
||||||
|
|
||||||
@ -382,7 +329,7 @@ arguments代表的是实参。有个讲究的地方是:arguments**只在函数
|
|||||||
|
|
||||||
略难,答案暂略。
|
略难,答案暂略。
|
||||||
|
|
||||||
### 练习5
|
### 练习5:数组去重
|
||||||
|
|
||||||
问题:编写一个方法去掉一个数组中的重复元素。
|
问题:编写一个方法去掉一个数组中的重复元素。
|
||||||
|
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
|
|
||||||
|
|
||||||
## call()和apply()
|
## call()和apply()
|
||||||
|
|
||||||
### 介绍
|
### 介绍
|
||||||
@ -8,20 +7,16 @@
|
|||||||
|
|
||||||
当函数调用call()和apply()时,函数都会立即**执行**。
|
当函数调用call()和apply()时,函数都会立即**执行**。
|
||||||
|
|
||||||
|
|
||||||
- 都可以用来改变函数的this对象的指向。
|
- 都可以用来改变函数的this对象的指向。
|
||||||
|
|
||||||
- 第一个参数都是this要指向的对象(函数执行时,this将指向这个对象),后续参数用来传实参。
|
- 第一个参数都是this要指向的对象(函数执行时,this将指向这个对象),后续参数用来传实参。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 显式绑定this
|
### 显式绑定this
|
||||||
|
|
||||||
JS提供的绝大多数函数以及我们自己创建的所有函数,都可以使用call 和apply方法。
|
JS提供的绝大多数函数以及我们自己创建的所有函数,都可以使用call 和apply方法。
|
||||||
|
|
||||||
它们的第一个参数是一个对象。因为你可以直接指定 this 绑定的对象,因此我们称之为显式绑定。
|
它们的第一个参数是一个对象。因为你可以直接指定 this 绑定的对象,因此我们称之为显式绑定。
|
||||||
|
|
||||||
|
|
||||||
例1:
|
例1:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@ -33,10 +28,10 @@ JS提供的绝大多数函数以及我们自己创建的所有函数,都可以
|
|||||||
a: 2
|
a: 2
|
||||||
};
|
};
|
||||||
|
|
||||||
foo.apply(obj);//打印结果:2
|
// 将 this 指向 obj
|
||||||
|
foo.apply(obj); //打印结果:2
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
### 第一个参数的传递
|
### 第一个参数的传递
|
||||||
|
|
||||||
1、thisObj不传或者为null、undefined时,函数中的this会指向window对象(非严格模式)。
|
1、thisObj不传或者为null、undefined时,函数中的this会指向window对象(非严格模式)。
|
||||||
@ -48,10 +43,8 @@ JS提供的绝大多数函数以及我们自己创建的所有函数,都可以
|
|||||||
4、传递一个对象时,函数中的this则指向传递的这个对象。
|
4、传递一个对象时,函数中的this则指向传递的这个对象。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### call()和apply()的区别
|
### call()和apply()的区别
|
||||||
|
|
||||||
|
|
||||||
call()和apply()方法都可以将实参在对象之后依次传递,但是apply()方法需要将实参封装到一个**数组**中统一传递(即使只有实参只有一个,也要放到数组中)。
|
call()和apply()方法都可以将实参在对象之后依次传递,但是apply()方法需要将实参封装到一个**数组**中统一传递(即使只有实参只有一个,也要放到数组中)。
|
||||||
|
|
||||||
比如针对下面这样的代码:
|
比如针对下面这样的代码:
|
||||||
@ -72,15 +65,12 @@ call()和apply()方法都可以将实参在对象之后依次传递,但是appl
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
如果是通过call的参数进行传参,是这样的:
|
如果是通过call的参数进行传参,是这样的:
|
||||||
|
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
persion1.say.call(persion2, "实验小学", "六年级");
|
persion1.say.call(persion2, "实验小学", "六年级");
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
如果是通过apply的参数进行传参,是这样的:
|
如果是通过apply的参数进行传参,是这样的:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@ -89,15 +79,12 @@ call()和apply()方法都可以将实参在对象之后依次传递,但是appl
|
|||||||
|
|
||||||
看到区别了吗,call后面的实参与say方法中是一一对应的,而apply传实参时,要封装成一个数组,数组中的元素是和say方法中一一对应的,这就是两者最大的区别。
|
看到区别了吗,call后面的实参与say方法中是一一对应的,而apply传实参时,要封装成一个数组,数组中的元素是和say方法中一一对应的,这就是两者最大的区别。
|
||||||
|
|
||||||
|
|
||||||
### call()和apply()的作用
|
### call()和apply()的作用
|
||||||
|
|
||||||
- 改变this的指向
|
- 改变this的指向
|
||||||
|
|
||||||
- 实现继承。Father.call(this)
|
- 实现继承。Father.call(this)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## bind()
|
## bind()
|
||||||
|
|
||||||
- 都能改变this的指向
|
- 都能改变this的指向
|
||||||
@ -108,8 +95,6 @@ call()和apply()方法都可以将实参在对象之后依次传递,但是appl
|
|||||||
|
|
||||||
bind()传参的方式和call()一样。
|
bind()传参的方式和call()一样。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
参考链接:
|
参考链接:
|
||||||
|
|
||||||
- <https://www.jianshu.com/p/56a9c2d11adc>
|
- <https://www.jianshu.com/p/56a9c2d11adc>
|
||||||
@ -118,8 +103,6 @@ bind()传参的方式和call()一样。
|
|||||||
|
|
||||||
- <https://segmentfault.com/a/1190000007402815>
|
- <https://segmentfault.com/a/1190000007402815>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- [JS中改变this指向的方法](http://www.xiaoxiaohan.com/js/38.html)
|
- [JS中改变this指向的方法](http://www.xiaoxiaohan.com/js/38.html)
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user