2024年Web前端最新ES6新增语法(四)——面向对象，字节面试官态度不好

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

showName(){

console.log(‘我叫’,this.name)

}

showAge(){

console.log(‘今年’,this.age,“岁”)

}

}

var p =new Person(‘倩倩’,18);

p.showName();

p.showAge()

面向对象的继承

=======

传统面向对象的继承：

• 使用apply方法，子类继承父类全部属性。

• 使用prototype方法，子类继承父类的方法。

传统面向对象的继承实例如下：

function Person(name,age){

this.name = name;

this.age = age

}

Person.prototype.showName = function(){

console.log(‘我叫’,this.name)

}

Person.prototype.showAge = function(){

console.log(‘今年’,this.age,‘岁’)

}

function Worker(name,age,job){

Person.apply(this,arguments)//继承属性

this.job = job

}

Worker.prototype = new Person();//继承方法

Worker.prototype.showJob = function(){

console.log(‘工作是’,this.job);

}

var w = new Worker(‘倩倩’,18,‘打杂’);

w.showName();

w.showAge();

w.showJob();

ES6面向对象继承：

使用extends实现子类对父级的继承，super()将父类的属性继承过来。

class Person{

constructor(name,age){

this.name = name;

this.age = age;

}

showName(){

console.log(‘我叫’,this.name)

}

showAge(){

console.log(‘今年’,this.age,“岁”)

}

}

class Worker extends Person {

constructor(name,age,job){

super(name,age)

this.job = job

}

showJob(){

console.log(‘工作是’,this.job)

}

}

var w = new Worker(‘倩倩’,18,‘打杂’);

w.showName();

w.showAge();

w.showJob()

关于super：

子类中有constructor，内部就要有super，因为子类没有自己的this对象，需要继承父类的this对象。

这里的super(name,age)就是调用父类的构造函数。

super 虽然代表了Person的构造函数，但是返回的是子类Worker的实例。

ES6面向对象优点

• ES6面向对象相比传统面向对象，语法简化
• ES6语法标准、统一，适合大项目开发，不易产生冲突。
• ES6是系统提供的标准语法，可以忽略兼容性问题。

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。