关于JS的面向对象的思考和总结

weij 发布于2019-08-26 12:15 / 2395人阅读

摘要：面向对象编程的优势继承多态封装继承获取父类的全部数据和功能，实现的是复制。多态根据实现方法的对象，相同方法名具有不同的行为。封装聚合对象数据和功能，以及限制它们和外界的联系访问权限。

面向对象编程的概念和原理 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()
    }
}

GPU云服务器云服务器 java关于面向对象 php的面向对象 java的面向对象 php的面向对象应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108328.html

关于JS的面向对象的思考和总结

摘要：面向对象编程的优势继承多态封装继承获取父类的全部数据和功能，实现的是复制。多态根据实现方法的对象，相同方法名具有不同的行为。封装聚合对象数据和功能，以及限制它们和外界的联系访问权限。面向对象编程的概念和原理 1、面向对象编程是什么它是用抽象的方式创建基于现实世界模型的编程模式（将数据和程序指令组合到对象中） 2、面向对象编程的目的在编程中促进更好的灵活性和可维护性，在大型软件工程...

paulli3 2019-08-02 11:16 评论0 收藏0
JS程序

摘要：设计模式是以面向对象编程为基础的，的面向对象编程和传统的的面向对象编程有些差别，这让我一开始接触的时候感到十分痛苦，但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程，否则只会让你自己更痛苦。 JavaScript 中的构造函数学习总结。知识只有分享才有存在的意义。是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 评论0 收藏0
关于javascript面向对象编程

摘要：所以让我们赶紧切入正题，一起来看看关于脚本的面向对象编程。所以下面让我们用这些特性重新写一下上面实现的函数，看一下更原汁原味的面向对象编程。今天怀着忐忑的心情写下这篇文章，因为这毕竟是我第一篇真正意义上的技术文章，巩固知识的同时，希望可以给阅读的人带来收获，就很满足了。所以让我们赶紧切入正题，一起来看看关于Java脚本的面向对象编程。 showImg(https://segmentf...

Enlightenment 2019-08-22 10:40 评论0 收藏0
前端基础进阶（十）：面向对象实战之封装拖拽对象

摘要：前面几篇文章，我跟大家分享了的一些基础知识，这篇文章，将会进入第一个实战环节利用前面几章的所涉及到的知识，封装一个拖拽对象。不封装对象直接实现利用原生封装拖拽对象通过扩展来实现拖拽对象。 showImg(https://segmentfault.com/img/remote/1460000008699587); 前面几篇文章，我跟大家分享了JavaScript的一些基础知识，这篇文章，...

Eidesen 2019-08-21 18:31 评论0 收藏0
前端思考 - 收藏集 - 掘金

摘要：并尝试用为什么你统计的方式是错的掘金翻译自工程师的文章。正如你期望的，文中的前端开发单一职责原则前端掘金单一职责原则又称单一功能原则，面向对象五个基本原则之一。单页式应用性能优化 - 首屏数据渐进式预加载 - 前端 - 掘金前言针对首页和部分页面打开速度慢的问题，我们开始对单页式应用性能进行优化。本文介绍其中一个方案：基于 HTTP Chunk 的首屏数据渐进式预加载方案，该方案总...

LinkedME2016 2019-08-20 17:19 评论0 收藏0