当前位置:Gxlcms > JavaScript > JS如何实现面向对象编程?js面向对象编程的原理介绍

JS如何实现面向对象编程?js面向对象编程的原理介绍

时间:2021-07-01 10:21:17 帮助过:105人阅读

本篇文章给大家带来的内容是关于JS如何实现面向对象编程?js面向对象编程的原理介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

1、面向对象编程是什么

它是用抽象的方式创建基于现实世界模型的编程模式(将数据和程序指令组合到对象中)

2、面向对象编程的目的

在编程中促进更好的灵活性和可维护性,在大型软件工程中广为流行。

3、面向对象编程的优势(继承、多态、封装)

继承:获取父类的全部(数据和功能),实现的是复制。
多态:根据实现方法的对象,相同方法名具有不同的行为。
封装:聚合对象数据和功能,以及限制它们和外界的联系(访问权限)。

JS中如何实现面向对象编程(参考)

1、原型链式继承

function Person() {
    this.name = 'per'
    this.obj = {
        name: ''
    }
}
Person.prototype.getName = function() {
    return this.obj.name
}
Person.prototype.setName = function(name) {
    this.name = name
    // 引用类型的赋值会同步给所有子类
    this.obj.name = name
}
function Student() {
    
}
Student.prototype = new Person()

const stu1 = new Student()
const stu2 = new Student()

stu1.setName('stu')
stu1.getName()
stu2.getName()
缺点:引用类型被修改时会同步给所有子类

2、构造函数继承

function Person() {
    this.obj = {
        name: 'a'
    }
    this.setName = name => {
        this.obj.name = name
    }
    this.getName = () => {
        return this.obj.name
    }
}
function Student() {
    Person.call(this)
}
const stu1 = new Student()
const stu2 = new Student()
stu1.setName('stu')
stu1.getName()
stu2.getName()
缺点:父类的函数在子类下面是不共享的,相当于动态的复制了一份代码

3、组合继承

function Person() {
    this.obj = {
        name: 'a'
    }
}
Person.prototype.getName = function() {
    return this.obj.name
}
Person.prototype.setName = function(name) {
    this.name = name
    // 引用类型的赋值会同步给所有子类
    this.obj.name = name
}
function Student() {
    // 继承属性
    Person.call(this)
}
// 继承方法
Student.prototype = new Person()
缺点:父类内的属性复制执行了两遍

4、寄生组合式继承

function Person() {
    this.obj = {
        name: 'a'
    }
}
Person.prototype.getName = function() {
    return this.obj.name
}
Person.prototype.setName = function(name) {
    this.name = name
    // 引用类型的赋值会同步给所有子类
    this.obj.name = name
}
function Student() {
    // 继承属性
    Person.call(this)
}
// 这里实现方法的继承
function inherit(sub, parent) {
    sub.prototype = Object.create(parent.prototype)
    sub.prototype.constructor = sub       
}
inherit(Student, Person)
这里解决了组合式继承的父类代码二次执行问题

5、class实现继承(参考)

class Person {
    constructor(){
        this.obj = {
            name: 'a'
        }
    }
    get name() {
        return this.obj.name
    }
    set name(name) {
        this.obj.name = name
    }
}
class Student extends Person {
    constructor() {
        super()
    }
}

相关推荐:

js面向对象 多种创建对象方法小结_js面向对象

javascript面向对象编程代码_js面向对象

以上就是JS如何实现面向对象编程?js面向对象编程的原理介绍的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行