ES6、ES5对象的封装与继承(学习笔记)

最新推荐文章于 2024-07-08 17:48:24 发布

原创最新推荐文章于 2024-07-08 17:48:24 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#类的封装与继承

前端基础专栏收录该内容

32 篇文章

订阅专栏

本文深入探讨了JavaScript中ES5和ES6的封装与继承技术，包括构造函数、原型链、class语法糖等关键概念，通过具体示例展示了如何在不同版本的JavaScript中实现对象的封装与继承。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Javascript是一种基于对象（object-based）的语言

1.ES5封装

function cat( name, age){
    this.name = name;
    this.age = age;
}
cat.prototype.type = '猫科动物';
cat.prototype.eat = function() {console.log('吃老鼠')};

var cat1 = new cat('米老鼠','20');
console.log(cat1.eat()); //吃老鼠

2.ES5继承

function Women(){
    this.sex = 'women';
}

function Girl(name,age){
     Women.apply(this,arguments);
     this.name = name;
     this.age = age;
}

var xh = new Girl('小花',20);
console.log(xh.sex); // women

// 第二种

Girl.prototype = new Women();
Girl.prototype.constructor = Girl;

var xh = new Girl('小花',20);
console.log(xh.sex); // women

3.ES6封装

class Person{ //方法之间不能有逗号
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    say(){
        console.log('hello');
    }
}

var p = new Person('xx','aa');

4.ES6继承

class Person{ //方法之间不能有逗号
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    say(){
        console.log('hello');
    }
}

class Men extends Person{
    constructor(x,x,sex){
        super(x,y); // 子类必须用super来继承父类的this
        this.sex = sex;
    }
    eat(){
        console.log('吃东西');
    }
}

var xm = new Men('x1','y1','男');
console.log(xm.x); // x1