前端-JS基础之面向对象

最新推荐文章于 2023-05-23 19:45:58 发布

敦煌璧画

最新推荐文章于 2023-05-23 19:45:58 发布

阅读量116

点赞数

文章标签：前端 javascript 原型模式

本文链接：https://blog.csdn.net/m0_58200396/article/details/122831949

版权

本文详细介绍了JavaScript中的Class，包括其用法、严格模式、constructor、Class表达式、私有方法和属性、原型属性、静态方法、get和set以及继承。讲解了如何使用super关键字，以及如何判断类的继承关系，帮助开发者深入理解JS面向对象编程。

摘要由CSDN通过智能技术生成

Class

用法

class跟let、const一样：不存在变量提升、不能重复声明…

es5面向对象写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

//es5
function Fn(x, y) {
   
  this.x = x;
  this.y = y;
}

Fn.prototype.add = function () {
   
  return this.x + this.y;
};
//等价于
//es6
class Fn{
   
  constructor(x,y){
   
    this.x = x;
    this.y = y;
  }
  
  add(){
   
    return this.x + this.y;
  }
}

var F = new Fn(1, 2);
console.log(F.add()) //3

构造函数的prototype属性，在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。

class Fn {
   
  constructor() {
   
    // ...
  }

  add() {
   
    // ...
  }

  sub() {
   
    // ...
  }
}

// 等同于

Fn.prototype = {
   
  constructor() {
   },
  add() {
   },
  sub() {
   },
};