前端与 js | 青训营笔记

310 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

课堂重点

这节课学的是月影老师的如何学好《JavaScript(上)》,并不是所谓的一点点教js的基础和应用,而是传授一些写js的理念,讲了js的原则是各司其责,组件封装和过程抽象,并举了白天黑夜模式的代码优化,轮播图组件的组件化抽象化以及高阶函数的运用等例子,受益匪浅。

详细知识点介绍-class

其实学网课的过程中发现自己就连js类的运用都还不够了解,这里就以课下搜索的资料恶补一下这方面知识

class 类是一种抽象的体现,用来表示具有相同特性的一类事物,是面向对象编程oop不可缺少的工具。

class的基础知识

下面是一个代码例子引入

class Person {
      constructor(surname, name) {
        this.surname = surname
        this.name = name
      }
      work() {
        console.log("我们会一直跑");
      }
      getName() {
        return this.surname + this.name
      }
    }
    const p1 = new Person("张", "三")
    p1.work()
    console.log(p1.getName());

这里的class person就是一个类,而其中的constructor函数就是类的构造器函数,当我们是实例一个类的时候,该函数里面的代码就会执行,常用来初始化实例的一些属性,上面的例子的属性就surnamename,其次如果constructor函数内返回了一个对象,则实例就是该对象,反之实例就是刚刚在堆内存中创建的对象

相关知识拓展,面试会问

new 一个类发生了什么?

  1. 在内存中开辟一个空间创建一个对象
  2. 在空对象的_proto_指向该构造函数的原型(/原型链挂载)
  3. 运行这个构造函数,并且用call绑定this
  4. 返回该对象
const _new = function(constructor) {  
  // 创建一个空对象  
  const obj = {}  
  // 原型链挂载  
  obj.__proto__ = constructor.prototype;  
  // 将obj 复制给构造体中的 this,并且返回结果  
  const result = constructor.call(obj)  
  // 如果返回对象不为一个对象则直接返回刚才创建的对象  
  return typeof result === 'object' && result !== null ? : result : obj  
}

类的静态属性和实例属性

      static work() {
        console.log("我们会一直跑");
      }

在上述例子中的work函数前面加上static就可以使其成为类的静态属性,只有类本身才能访问,通过Person.worek()调用,没有加的话就是实例属性,所有创造的实例都能调用

类的私有属性

类的私有属性这个概念是在ES11中提出来的。通过在属性前面加#来实现,实例化对象不能访问类中的私有属性。 但是类中的方法可以访问

继承

子类可以通过extends继承父类,但是继承的同时需要注意子类继承父类时需要调佣super函数,作用就是调用父类的constructor,还要注意不要在super前访问this

class Father {
      constructor(money) {
        this.money = 1000000
      }
    }
    class Son extends Father {
      constructor() {
        super()
      }
    }

个人总结

本章里面的许多老师代码例子片段其实第一次听的时候都发现还不是能很看懂,说明自己还有很长的一段路要走。学网课的过程中惊呼js原来还可以这么写,看着自己之前写的繁琐重复的代码也发现自己还有很多不足,需要一点点改进。

文章参考

js中的Class类详解: blog.csdn.net/m0_58239318… javascript类中的私有属性 blog.csdn.net/qq_40544434…