es6中的class与继承，前端工程师必备知识

console.log(obj.say());//我是来证明的，你叫kity今年88岁了

当然也可以通过prototype属性对类添加方法。如下：

Person.prototype.addFn=function(){

return “我是通过prototype新增加的方法,名字叫addFn”;

}

var obj=new Person(“kity”,88);

console.log(obj.addFn());//我是通过prototype新增加的方法,名字叫addFn

还可以通过Object.assign方法来为对象动态增加方法

Object.assign(Person.prototype,{

getName:function(){

return this.name;

},

getAge:function(){

return this.age;

}

})

var obj=new Person(“kity”,88);

console.log(obj.getName());//kity

console.log(obj.getAge());//88

constructor方法是类的构造函数的默认方法，通过new命令生成对象实例时，自动调用该方法。

class Box{

constructor(){

console.log(“啦啦啦，今天天气好晴朗”);//当实例化对象时该行代码会执行。

}

}

var obj=new Box();

constructor方法如果没有显式定义，会隐式生成一个constructor方法。所以即使你没有添加构造函数，构造函数也是存在的。constructor方法默认返回实例对象this，但是也可以指定constructor方法返回一个全新的对象，让返回的实例对象不是该类的实例。

class Desk{

constructor(){

this.aa=“我是一只小小小小鸟！哦”;

}

}

class Box{

constructor(){

return new Desk();// 这里没有用this哦，直接返回一个全新的对象

}

}

var obj=new Box();

console.log(obj.aa);//我是一只小小小小鸟！哦

constructor中定义的属性可以称为实例属性（即定义在this对象上），constructor外声明的属性都是定义在原型上的，可以称为原型属性（即定义在class上)。hasOwnProperty()函数用于判断属性是否是实例属性。其结果是一个布尔值， true说明是实例属性，false说明不是实例属性。in操作符会在通过对象能够访问给定属性时返回true,无论该属性存在于实例中还是原型中。

class Box{

constructor(num1,num2){

this.num1 = num1;

this.num2=num2;

}

sum(){

return num1+num2;

}

}

var box=new Box(12,88);

console.log(box.hasOwnProperty(“num1”));//true

console.log(box.hasOwnProperty(“num2”));//true

console.log(box.hasOwnProperty(“sum”));//false

console.log(“num1” in box);//true

console.log(“num2” in box);//true

console.log(“sum” in box);//true

console.log(“say” in box);//false

类的所有实例共享一个原型对象，它们的原型都是Person.prototype，所以proto属性是相等的

class Box{

constructor(num1,num2){

this.num1 = num1;

this.num2=num2;

}

sum(){

return num1+num2;

}

}

//box1与box2都是Box的实例。它们的__proto__都指向Box的prototype

var box1=new Box(12,88);

var box2=new Box(40,60);

console.log(box1.proto===box2.proto);//true

由此，也可以通过proto来为类增加方法。使用实例的proto属性改写原型，会改变Class的原始定义，影响到所有实例，所以不推荐使用！

class Box{

constructor(num1,num2){

this.num1 = num1;

this.num2=num2;

}

sum(){

return num1+num2;

}

}

var box1=new Box(12,88);

var box2=new Box(40,60);

box1.proto.sub=function(){

return this.num2-this.num1;

}

console.log(box1.sub());//76

console.log(box2.sub());//2

class不存在变量提升，所以需要先定义再使用。因为ES6不会把类的声明提升到代码头部，但是ES5就不一样,ES5存在变量提升,可以先使用，然后再定义。

//ES5可以先使用再定义,存在变量提升

new A();

function A(){

}

//ES6不能先使用再定义,不存在变量提升 会报错

new B();//B is not defined

class B{

}

ES5中的继承 （组合继承:原型链继承 + 借用构造函数)

原型链继承：

父类的实例作为子类的原型

function Persion(name,age){

this.name=name;

this.age=age;

this.say=function(){

console.log(${this.name} ${this.age});

}

}

Persion.prototype.test=function(){

console.log(“我是原型上的方法”);

}

//子类

function Women(){

this.sex=‘女’

}

Women.prototype=new Persion(‘kity’,18);//父类的实例作为子类的原型

var one=new Women(‘tom’,20);

one.say();//kity 18 子类实例，不能向父类构造函数中传参数

one.test();// 可以调用原型方法 我是原型上的方

借用构造函数继承：

在子类内,使用call()调用父类方法,并将父类的this修改为子类的this.相当于是把父类的实例属性复制了一份放到子类的函数内.

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

[外链图片转存中…(img-ngtzrgtd-1710873094623)]
[外链图片转存中…(img-AzH2nnjF-1710873094624)]
[外链图片转存中…(img-tnL3M6Ua-1710873094624)]
[外链图片转存中…(img-d5XVaDQe-1710873094625)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-CZDtCF4A-1710873094625)]