此时打印出say会报错,但是可以执行sayHello_js class 构造函数">
当前位置:   article > 正文

javascript中的class类构造函数_js 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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/78695
推荐阅读
相关标签
  

闽ICP备14008679号