javascript中的class类构造函数_js class 构造函数

javascript中的class类构造函数

一、函数存在变量提升，但是类不存在变量提升
二、函数受函数作用域限制，但是类受块级作用域限制

<script>
{
      function sayHello(){
        console.log("hello");
      }
      class say{}
    }
   console.log(say);
    sayHello();
</script>
1
2
3
4
5
6
7
8
9
10

此时打印出say会报错，但是可以执行sayHello（）语句，当在一个函数中定义另一个函数的时候，此时在外部进行访问时，就会报错。这是因为函数的作用域是函数作用域。
三、使用变量名.name 来获取类构造函数的名称

<script>
let person = class Person{
      sayHello(){
        console.log("hello");
      }
    }
    let person_1 = new person();
    person_1.sayHello();
    console.log(person.name);
</script>
1
2
3
4
5
6
7
8
9
10

此时可以获取类的名称。
四、当使用new来重新定义一个函数的时候，执行以下操作：
①在内存空间中来重新开辟一个地址
②将其中的constructor中的this执行该实例对象
③立即执行该constructor中的内容
五、当定义一个类构造函数，此时constructor函数中返回的是this，此时可以设置instanceof来判断这个实例是否属于该对象

<script>
    class Person{
      constructor(){
        this.foo = "ssss";
        return {
          name:"xxx"
        }
      }
    }
    let person_1 = new Person();
    console.log(person_1 instanceof Person);
</script>
1
2
3
4
5
6
7
8
9
10
11
12

这里使用的是return一个对象，因为这个对象没有设置其指向，instanceof 就是错误的。
八、类和构造函数也是存在区别的：在使用new来声明一个新的实例对象时，如果构造函数不使用new来声明定义，则此时的this指向的是window对象，当类构造函数中的this不使用new来定义，则会出现报错

<script>
 class Person{
      constructor(){
        console.log(this);
      }
    }
    let person_1 = Person();

    // function Person(){
    //   console.log(this);
    // }
    // let person_1 =Person();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

九 、在类构造函数中都需要使用new来进行初始化实例对象，并且都指向最初的类构造函数

<script>
class Person{
      constructor() {
        this.name = "xsy";
        console.log("hello");
      }
    }
    let person_1 = new Person();
    let person_2 =new person_1.constructor();
    console.log(person_2);
</script>
1
2
3
4
5
6
7
8
9
10
11

十、我们可以将类和构造函数进行比较，其实两者大致相同，可以这样理解：类是构造函数的封装
在类的constructor指向的是anonymous函数。
十一、类是javascript的一等公民，可以作为数组和函数参数传入其中。
十二、在类中的constructor函数中，当每次新建一个对象的时候，如果constructor函数中的属性为引用值属性，则会在每一个实例中重新创建一个，如果是原始值则将指针指向原来的值。

<script>
 class Person{
      constructor(){
        this.name = new String("jack");
        this.sayName =function(){
          console.log("我是dl");
        };
        this.arr = ['jack','luck'];
      }
    }
    let p1 = new Person();
    let p2 = new Person();
    console.log(p1.name === p2.name);
    console.log(p1.sayName === p2.sayName);
    console.log(p1.arr === p2.arr);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

十三、类方法是对象属性，因此可以使用字符串，符号，或者计算的值作为键

<script>
 const symbolKey = Symbol("symbolkey");
    class Person{
      [symbolKey](){
        console.log("invoked");
      }
      ["LO" + "Ve"](){
        console.log("hh");
      }
    }
    let p1 = new Person();
    p1.LOVe();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

十四、类也可以设置访问器属性

<script>
 class Person{
        set name(value){
          this.name_ = value;
        }
        get name(){
          return this.name_;
        }
      }
      let p1 = new Person();
      p1.name = "dongli";
      console.log(p1.name);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

十五、静态类方法
定义在constructor中的变量或者函数，可以在每一个实例对象中查找，没有定义在constructor中的对象，在类的原型对象中查找。使用static定义的函数，在类本身上查找。

<script>
 class Person {
      constructor(name) {
        this.name_ = name;
      }
      sayName() {
        console.log("我是dl");
      }
      static hello() {
        console.log("sss");
      }
    }
    let p1 = new Person("xsy");  //既然是Person类上面的方法，不能使用参数传入
    Person.hello();
    p1.sayName();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

十六、可以在类的原型上添加方法

<script>
class Person{}
      Person.name = "dongli";
      Person.prototype.sayHello=function(){
        console.log("你好");
      }
      console.log(Person.prototype );
</script>
1
2
3
4
5
6
7
8

十七、类的生成器方法

<script>
class Person{
  *func(){
    yield 1;
    yield 2;
    yield 3;
  }
  static *funcs(){
    yield "one";
    yield "two";
    yield "three";
  }
}
let p1 = Person.funcs();
console.log(p1.next().value);
console.log(p1.next().value);
console.log(p1.next().value);
console.log(p1.next());
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

十八、设置迭代器接口

<script>
class Person{
  constructor(){
    this.nickName = ['jack','jcc','j-co'];
  }
  *[Symbol.iterator](){
    yield *this.nickName.entries();
  }
}
let p = new Person();
for(let [index,value] of p){
  console.log(index,value);
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>

class Person{
  constructor() {
    this.arr = ["javascript",'数据结构与算法','lede'];
  }
  [Symbol.iterator](){
    return this.arr.entries();
  }
}
let p = new Person();
for(let [index,value] of p){
  console.log(value);
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15