js面向对象_箭头函数this_数组常用方法

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 11k | 阅读时长 ≈ 10 分钟

1、js面向对象

1)传统的面向对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    function Person(name, age){
      this.name=name;
      this.age=age;
    }

    Person.prototype.showName=function (){
      alert('我叫'+this.name);
    };
    Person.prototype.showAge=function (){
      alert('我'+this.age+'岁');
    };




    let p=new Person('blue', 18);

    p.showName();
    p.showAge();
    </script>
  </head>
  <body>

  </body>
</html>

继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    function Person(name, age){
      this.name=name;
      this.age=age;
    }

    Person.prototype.showName=function (){
      alert('我叫'+this.name);
    };
    Person.prototype.showAge=function (){
      alert('我'+this.age+'岁');
    };

    //------------------------------------------------
    function Worker(name, age, job){
	  //通过call调用父类构造函数
      Person.call(this, name, age);
      this.job=job;
    }

	//使得子类实例对象共享父类原型对象上的方法
    Worker.prototype=new Person();
	//重写子类原型对象的构造，特别恶心
    Worker.prototype.constructor=Worker;
    Worker.prototype.showJob=function (){
      alert('我是做：'+this.job);
    };

    let w=new Worker('blue', 18, '打杂的');

    w.showName();
    w.showAge();
    w.showJob();
    </script>
  </head>
  <body>

  </body>
</html>

2）js标准的面向对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    /*function Person(name, age){
      this.name=name;
      this.age=age;
    }

    Person.prototype.showName=function (){
      alert('我叫'+this.name);
    };
    Person.prototype.showAge=function (){
      alert('我'+this.age+'岁');
    };*/

	//标准面向对象书写方式
    class Person{
      constructor(name, age){
        this.name=name;
        this.age=age;
      }

      showName(){
        alert('我叫'+this.name);
      }
      showAge(){
        alert('我'+this.age+'岁');
      }
    }

    let p=new Person('blue', 18);

    p.showName();
    p.showAge();

    //------------------------------------------------
    function Worker(name, age, job){
      Person.call(this, name, age);
      this.job=job;
    }

    Worker.prototype=new Person();
    Worker.prototype.constructor=Worker;
    Worker.prototype.showJob=function (){
      alert('我是做：'+this.job);
    };
    </script>
  </head>
  <body>

  </body>
</html>

标准的继承方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    /*function Person(name, age){
      this.name=name;
      this.age=age;
    }

    Person.prototype.showName=function (){
      alert('我叫'+this.name);
    };
    Person.prototype.showAge=function (){
      alert('我'+this.age+'岁');
    };*/

	//标准面向对象书写方式
    class Person{
      constructor(name, age){
        this.name=name;
        this.age=age;
      }

      showName(){
        alert('我叫'+this.name);
      }
      showAge(){
        alert('我'+this.age+'岁');
      }
    }

    /*let p=new Person('blue', 18);

    p.showName();
    p.showAge();*/

    //------------------------------------------------
    /*function Worker(name, age, job){
      Person.call(this, name, age);
      this.job=job;
    }

    Worker.prototype=new Person();
    Worker.prototype.constructor=Worker;
    Worker.prototype.showJob=function (){
      alert('我是做：'+this.job);
    };*/

	//标准继承方式，子类通过extends实例化的子类可以访问到父类原型对象的方法
    class Worker extends Person{
      constructor(name, age, job){
        //super-超类(父类)，可以访问到构造方法，不需要通过call的方式调用
        super(name, age);
        this.job=job;
      }

      showJob(){
        alert('我是做：'+this.job);
      }
    }

    let w=new Worker('blue', 18, '打杂的');

    w.showName();
    w.showAge();
    w.showJob();
    </script>
  </head>
  <body>

  </body>
</html>

2、箭头函数this

普通函数：根据调用我的人 this老变

箭头函数：根据所在的环境 this恒定

bind——给函数定死一个this

例1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script>
    let arr = [1, 2, 3];

	//箭头函数所处的环境是window
    arr.a = () => {
      console.log(this);
    };

    arr.a();
  </script>
</head>

<body>

</body>

</html>

输出

例2：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    document.onclick=function (){
      let arr=[1,2,3];

	  //箭头函数所处的环境是document
      arr.a=()=>{
        console.log(this);
      };

      arr.a();
    };
    </script>
  </head>
  <body>

  </body>
</html>

输出

![](https://raw.githubusercontent.com/shenlibing/blogphoto/master/source/箭头函数this (2).png)

例3：

箭头函数所处的环境是document，尽管通过bind绑定死了12，但还是输出document，说明箭头函数的this优先级高于bind方式绑定的this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    document.onclick=function (){

      let a=()=>{
        console.log(this);
      };

      let oBtn=document.getElementById('btn1');
      oBtn.onclick=a.bind(12);
    };
    </script>
  </head>
  <body>
    <input type="button" value="aaa" id="btn1">
  </body>
</html>

输出

![](https://raw.githubusercontent.com/shenlibing/blogphoto/master/source/箭头函数this (3).png)

3、数组常用方法

1）map 映射

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    let arr=[62, 55, 82, 37, 26];

    let arr2=arr.map(function (item){
      if(item>=60){
        return true;
      }else{
        return false;
      }
    });

	//true,false,true,false,false
    alert(arr2);
    </script>
  </head>
  <body>

  </body>
</html>

改进1

map参数：回调函数使用箭头函数书写方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    let arr=[62, 55, 82, 37, 26];

    let arr2=arr.map((item)=>{
      if(item>=60){
        return true;
      }else{
        return false;
      }
    });

    alert(arr2);
    </script>
  </head>
  <body>

  </body>
</html>

改进2

如果有且仅有1个参数，()可以省

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    let arr=[62, 55, 82, 37, 26];

    let arr2=arr.map(item=>{
      if(item>=60){
        return true;
      }else{
        return false;
      }
    });

    alert(arr2);
    </script>
  </head>
  <body>

  </body>
</html>

改进3

如果函数体只有一句话，而且是return，{}可以省

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    let arr=[62, 55, 82, 37, 26];

    let arr2=arr.map(item=>item>=60);

    alert(arr2);
    </script>
  </head>
  <body>

  </body>
</html>

2）filter过滤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    let arr=[12,5,88,37,21,91,17,24];

    let arr2=arr.filter(item=>item%2);

	//5,37,21,91,17
    alert(arr2);
    </script>
  </head>
  <body>

  </body>
</html>

3）forEach 遍历

求和

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    let arr=[12,5,88,37,21,91,17,24];

    let sum=0;
    arr.forEach(item=>{
      sum+=item;
    });

	//结果295
    alert(sum);
    </script>
  </head>
  <body>

  </body>
</html>

4）reduce 汇总

参数

tmp:中间结果

item：元素项

index：元素索引

求和

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    let arr=[12,5,88,37,21,91,17,24];

    let sum=arr.reduce((tmp,item,index)=>{
      console.log(tmp, item, index);

      return tmp+item;
    });

    console.log(sum);
    </script>
  </head>
  <body>

  </body>
</html>

输出

求平均

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    let arr=[12,5,88,37,21,91,17,24];

    let sum=arr.reduce((tmp,item,index)=>{
      return tmp+item;
    });

	//结果36.875
    console.log(sum/arr.length);
    </script>
  </head>
  <body>

  </body>
</html>

5）from

将类数组转换成数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      div {width:200px; height:200px; background:#CCC; float:left; margin:10px;}
    </style>
    <script>
    window.onload=function (){

	  //DOM对象
      let aDiv=document.getElementsByTagName('div');
      console.log(aDiv);

	  //数组
      let aDiv2=Array.from(aDiv);
      console.log(aDiv2);

      Array.from(aDiv).forEach(div=>{
        div.style.background='yellow';
      });

      Array.prototype.slice.call(aDiv).forEach(div=>{
        div.style.background='blue';
      });


    };
    </script>
  </head>
  <body>
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
  </body>
</html>

输出