欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-25 14:20:53
...
本篇文章给大家带来的内容是关于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面向对象编程的原理介绍的详细内容,更多请关注其它相关文章!