JavaScript面向对象编程浅析

最新推荐文章于 2022-04-28 17:53:28 发布
最新推荐文章于 2022-04-28 17:53:28 发布
阅读量1.5k 收藏 75
点赞数 6
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuyxinu/article/details/115751332
版权

JavaScript面向对象编程及设计模式

JavaScript面向对象编程及设计模式

一、面向对象编程

1、简述

面向对象是一种程序的设计思想，与之对应的编程思想叫做面向过程

**例如：**比如我想要用代码描述一个场景，有一只叫做xiaoA的猫，吃了一个苹果，又吃了一条鱼，然后有一只叫做xiaoB的猫，吃了一根香蕉

// 面向过程
function xiaoAEatApple() {}
function xiaoAEatFish() {}
function xiaoBEatBanana() {}
xiaoAEatApple();
xiaoAEatFish();
xiaoBEatBanana();

// 面向对象
function Cat(name) {
	this.name = name
}
Cat.prototype.eat = function(something) {}
let xiaoA = new Cat('xiaoA')
let xiaoB = new Cat('xiaoB')
xiaoA.eat('apple')
xiaoA.eat('fish')
xiaoB.eat('banana')

2、面向对象编程特点

  • 面向对象注重于抽象事务，而面向过程注重于叙述事务
  • 面向对象逻辑清晰有条理，而面向过程比较方面
  • JS通过函数和原型，模拟了传统面向对象编程中类的概念实现了面向对象的编程模式
  • 面向对象的编程思想，主要为了实现3件事，封装，继承和多态

3、封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script>
    // 普通方法
    // let carA = {
    //     name: 'xiaoA',
    //     eat() {
    //         console.log('xiaoA eat something')
    //     }
    // }
    // let carB = {
    //     name: 'xiaoB',
    //     eat() {
    //         console.log('xiaoB eat something')
    //     }
    // }
    // let carC = {
    //     name: 'xiaoC',
    //     eat() {
    //         console.log('xiaoC eat something')
    //     }
    // }
    // 代码重复量多，需要封装
    // 封装
    // 使用工厂模式封装
    // function createCat(name) {
    //     let obj = {}
    //     obj.name = name;
    //     obj.eat = () => {
    //         console.log(name + 'eat something')
    //     }
    //     return obj;
    // }
    // let catA = createCat(xiaoA)
    // let catB = createCat(xiaoB)
    // let catC = createCat(xiaoC)

    // 使用面向对象的方式进行封装
    function CreateCat(name) { // 构造函数
        this.name = name;
        this.eat = () => {
            console.log(this.name + 'eat something')
        }
    }

    let catA = new CreateCat('xiaoA')
    let catB = new CreateCat('xiaoB')
    let catC = new CreateCat('xiaoC')

    </script>
</head>
<body>
    
</body>
</html>

4、this

// this
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    
    // this 
    // 在函数执行的时候会在函数内部创建两个变量，arguments, this
    // arguments是存储着实参的一个类数组变量
    // this 指向函数的执行上下文 (谁调用这个函数, this就指向谁)

    function aaa (a, b) {
        console.log(arguments)
    }
    aaa(1, 2, 3, 4) 
    // 数组 var arr = {1, 2, 3, 4}
    // 类数组对象 var arrObj = {0: 1, 1: 2, 2: 3, 3: 4, length: 4}
    
    function bbb() {
        console.log(this)
    }
    var objA = {
        b: bbb,
        c: {
            d: bbb,
        }
    }

    bbb(); // this 指向 window
    objA.b() // this 指向 objA
    objA.c.d(); // this 指向 objA.c

    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

5、call和apply

// call-apply
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    // call apply 用来动态改变this的指向

    // function aaa() {
    //     console.log(this)
    // }
    // var objA = {
    //     b: aaa
    // }

    // aaa() // this 指向window
    // objA.b() // this 指向objA

    // aaa.call(objA); // call 函数将aaa内的this 从指向 window 改成了 指向objA
    // objA.b.call(window); // call 函数将aaa内的this 从指向 objA 改成了 指向window

    function aaa(name, age) {
        // console.log(this)
        this.name = name
        this.age = age
    }
    var objA = {
        b: aaa
    }

    aaa.call(objA, 'xiaoA', 23); // call 函数将aaa内的this 从指向 window 改成了 指向objA
    console.log(objA.name, objA.age); // 打印 xiaoA 23


    objA.b.call(window, ['xiaoB', 30]); // call 函数将aaa内的this 从指向 objA 改成了 指向window
    console.log(window.name, window.age)

    objA.b.call(window, 'xiaoB', 30); // call 函数将aaa内的this 从指向 objA 改成了 指向window
    console.log(window.name, window.age)

    objA.b.apply(window, ['xiaoB', 30]); // call 函数将aaa内的this 从指向 objA 改成了 指向window
    console.log(window.name, window.age)
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

6、new

new 做了哪些操作
1.创建一个空对象
2.将构造函数的prototype属性赋值给新对象的__proto__属性
3.将构造函数的this指向新对象
4.执行构造函数的代码
5.将新对象返回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    
    function CreateCat(name) { 
        this.name = name
    }
    let catA = new CreateCat('xiaoA')

    console.log(catA.name)

    /*
        new 做了哪些操作
        1.创建一个空对象
        2.将构造函数的prototype属性赋值给新对象的__proto__属性
        3.将构造函数的this指向新对象
        4.执行构造函数的代码
        5.将新对象返回

    */
    // 闭包，自执行函数
    var catB = (function() {
        var obj = {}
        obj.__proto__ = CreateCat.prototype;
        CreateCat.call(obj, 'xiaoB');
        return obj
    })()
    console.log(catB.name)
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

7、继承

在声明函数的时候，会自动创建一个prototype属性，我们管他叫做原型, 一般用来存放实例公用的方法

prototype:
是子类继承的父类的属性，也就是当调用子类构造函数时，总的来说，这里只能是继承一个具体的对象，不能是一个类（es6后会有所改变）

prototype内容：
在这里插入图片描述
__proto__内容
是类继承父类之后，子类对象中的父类属性，里面的属性是可以通过子类对象直接取的，不需要用__proto__。
这里检索逻辑是：
先检索子类的直接属性是否存在，然后再检索__proto__，然后就是俄罗斯套娃，一层一层套下去，到最后还是没有就返回 undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    /*
        new 做了哪些操作
        1.创建一个空对象
        2.将构造函数的prototype属性赋值给新对象的__proto__属性
        3.将构造函数的this指向新对象
        4.执行构造函数的代码
        5.将新对象返回

    */
    
    // 在声明函数的时候，会自动创建一个prototype属性，我们管他叫做原型, 一般用来存放实例公用的方法

    function CreateCat(name) { 
        this.name = name;
    } 
    // console.log('prototype:', CreateCat.prototype)

    CreateCat.prototype.eat = function(something) {
        console.log(this.name + ' eat ' + something)
    }

    var catA = new CreateCat('xiaoA')
    catA.eat('fish')

    /*
        carA:
        1. {}  // 第一步创建新对象
        2. {
                __proto__: CreateCat.prototype
            }
        3. {
                __proto__: CreateCat.prototype,
                name:  'xiaoA'
            }
        4.执行构造函数的代码
        5.return
    */
    // 在JS里规定，访问对象属性的时候,如果对象下面没有这个属性,则去他下面的__proto__去寻找,如果没有，就一直向下寻找直到没有__proto__为止
    console.log(catA)

    // 类式继承
    function A(name) {
        this.name = name;
        this.list = [1, 2, 3]
    }

    A.prototype.getName = () => {
        console.log(this.name);
    }

    function SubA(name) {
        this.subName = 'sub' + this.name;
    }

    SubA.prototype = new A()

    var sa1 = new SubA('sa1');
    console.log(sa1.list, sa1.name); // 打印出 [1, 2, 3] undefined

    /*
        new A() -> {
            name: undefined,
            list: [1,2,3],
            __proto__: {
                getName: fn,
                constructor....
            }
        }

        new SubA('sa1') -> {
            subName: 'sub sa1',
            __proto__: {
                name: undefined,
                list: [1,2,3],
                __proto__: {
                    getName: fn,
                    constructor....
                }
            }
        }

        // 类式继承的问题
        1.这种方法不支持父构造函数带参数
        2.父构造函数里的方法和属性都会变成共有属性
    */

    var sa1 = new SubA('sa1'); 
    var sa2 = new SubA('sa2'); 

    A.prototype.getName = function() {
        console.log('fixed getName')
    }
    A.prototype.newFn = function() { 
        console.log('new Fn')
    }
    sa1.getName(); // 打印 fixed getName
    sa2.newFn();   // 打印 new Fn

    // 构造函数继承

    function A(name) {
        this.name = name;
        this.list = [1, 2, 3]
    }

    A.prototype.getName = () => {
        console.log(this.name);
    }

    function SubA(name) {
        A.call(this, name)
        this.subName = 'sub' + this.name;
    }

    var sa1 = new SubA('xiaoA');
    console.log(sa1.name, sa1.subName); // 打印出 xiaoA subxiaoA
    sa1.getName(); // 报错

    /*
        new SubA('xiaoA'); -> {
            __proto__: {
                constructor....
            },
            name: 'xiaoA',
            list: [1, 2, 3],
            subName: 'sub xiaoA'
        }

        // 构造函数继承问题
        1.不能继承父构造函数的原型方法
    
    */

    // 组合式继承

    function A(name) {
        this.name = name;
        this.list = [1, 2, 3]
    }

    A.prototype.getName = () => {
        console.log(this.name);
    }

    function SubA(name) {
        A.call(this, name)
        this.subName = 'sub' + this.name;
    }

    SubA.prototype = new A()
    var sa1 = new SubA('xiaoA');
    console.log(sa1.name, sa1.subName); // 打印出 xiaoA subxiaoA
    sa1.getName(); // xiaoA
    /*
        new A() ->  {
            name: undefined,
            list: [1, 2, 3],
            __proto__: {
                getName: fn
            }
        }
        new SubA('xiaoA'); -> {
            name: 'xiaoA',
            list: [1, 2, 3],
            subName: 'sub xiaoA',
            __proto__: {
                name: undefined,
                list: [1, 2, 3],
                __proto__: {
                    getName: fn
                }
            },
        }

        // 组合式继承问题
        1.__proto__里的属性没有用
        2.执行了两次父构造函数
        问题点在于： SubA.prototype = new A()
    */

    // 4.寄生组合式继承
    function A(name) {
        this.name = name;
        this.list = [1, 2, 3]
    }

    A.prototype.getName = () => {
        console.log(this.name);
    }

    function SubA(name) {
        A.call(this, name)
        this.subName = 'sub' + this.name;
    }

    // SubA.prototype = new A() // 优化这一句代码
    function inheritPrototype(subClass, superClass) { // 子构造函数 父构造函数
        function F() {};
        F.prototype = superClass.prototype;
        subClass.prototype = new F()
        subClass.prototype.constructor = subClass; // 可有可无
    }
    inheritPrototype(SubA, A)

    var sa1 = new SubA('xiaoA');
    console.log(sa1.name, sa1.subName); // 打印出 xiaoA subxiaoA
    sa1.getName(); // xiaoA
    </script>
</head>
<body>
    
</body>
</html>

8、多态

多态： 表示不同对象调用相同方法会产生不同结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    // 多态： 表示不同对象调用相同方法会产生不同结果
    function Base() {}

    Base.prototype.initial = function() {
        this.init()
    }

    function SubA() {
        this.init = function () { 
            console.log('subA init')
        }
    }
    function SubB() {
        this.init = function () { 
            console.log('subB init')
        }
    }
    
    SubA.prototype = new Base();
    SubB.prototype = new Base();

    var subA = new SubA()
    var subB = new SubB()

    subA.initial(); 
    subB.initial();

    </script>
</head>
<body>
    
</body>
</html>
wuyxinu
关注
  • 6
    点赞
  • 踩
  • 75
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JavaScript面向对象编程
hjc13348的博客
04-28 125
这里写目录标题面向对象编程思想面向过程与面向对象区别对象与类创建类继承类本节新get知识点 面向对象编程思想 面向过程与面向对象区别 面向对象 面向过程 易维护、易复用、易扩展 性能比面向对象高，适合跟硬件联系紧密 性能比面向过程低 不易维护 对象与类 在ES6中增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象。类抽象了对象的公共部分，它泛指某一大类（class）对象特指某一个，通过类实例化一个具体的对象 创建类 语法规范： 通过class 关键
Javascript面向对象编程思考与总结
planetttttt的博客
07-20 156
Javascript面向对象编程 什么是对象？万物皆对象 -对象：特指的某个事物，具有属性和方法（一组无序的属性的集合） 特征：-----> 属性 行为：----->方法 对象是单个事物的抽象 对象是一个容器，封装了属性（prototype）和方法（method）属性是对象的特征，方法是对象的行为 ECMAscript-262 把对象定义为：无序属性的集合，其属性可以包括值、对象或者函数。严格来说对象是一组没有特定顺序的值 什么是面向对象 面向对象编程 — (Object Oriented
JavaScript高级教程（面向对象编程）
一只努力搬砖的打工妹纸
01-25 5244
面向对象编程 有两大编程思想：面向过程和面向对象； 面向过程编程POP(Process-oriented programming) 面向过程即分析出解决问题所需要的步骤，然后用函数将这些步骤一步步实现，使用的时候再一个个的一次调用就可以了； 即将大象装进冰箱，从面向过程来看，需要打开冰箱门、装进去大象、关上冰箱门 面向对象编程OOP(Object Oriented Programming) 面向对象即把事务分解成为一个个对象，然后由对象之间分工与合作；是以对象功能来划分问题，而不是步骤；在面向对
浅析JavaScript面向对象编程的实现.pdf
最新发布
01-02
JavaScript是一种基于对象的脚本语言，虽然它不是严格的面向对象编程语言（Object-Oriented），但通过特定方式，可以实现类似面向对象的概念。本文将深入探讨JavaScript如何实现面向对象编程，包括封装、继承和多态...
JS面向对象编程浅析
12-11
总的来说，JavaScript的面向对象编程虽然与传统强类型语言有所不同，但依然提供了丰富的工具和机制来实现OOP的设计原则。通过理解并熟练运用这些概念，开发者可以写出更加高效、易于维护的JavaScript代码。在实际...
JavaScript的面向对象特性浅析与范例.pdf
01-02
"JavaScript面向对象特性浅析与范例" JavaScript是一种基于原型的解释型语言，它允许在任意时刻给一个对象添加任意多的属性和方法。 JavaScript的面向对象特性是指它可以实现面向对象编程的部分特性，而不是完全...
JavaScript的面向对象特性浅析与范例
09-14
传统方式对JavaScript的应用基本上是基于过程模型的，若在JavaScript中利用面向对象的思想进行代码编写，将会使得代码具有良好的结构和逻辑性，更便于管理和...本文让读者看到JavaScript如何实现面向对象编程并提供范例
JavaScript new对象的四个过程实例浅析
12-12
了解`new`操作符的工作原理对于深入理解JavaScript的面向对象编程至关重要。通过控制`this`的绑定，我们可以创建拥有特定属性和方法的对象实例。同时，原型链的设置使得对象可以继承构造函数的原型上的属性和方法，...
vue3 watch监听props内属性的值的变化 无响应情况分析
热门推荐
wuyxinu的博客
04-28 3万+
前言 在学习Vue3的时候，在项目实战中，需要用到watch监听props内属性的值的变化 但是却出现了无响应的现象 虽然让他可以响应只需要对watch的监听对象做一点小小的修改，但是我们还是需要研究一下具体为什么某些做法无法传值 ... props: { testData: { type: Object, default: () => {} } } ...... setup(props) { // 这种写法属于会有响应的情况 watch( () => props.t
Vue3 + TypeScript处理ESLint和Prettier冲突时，Failed to load config “@vue/prettier/@typescript-eslint“
wuyxinu的博客
04-11 1万+
前言 在 Vue+TypeScript 项目中，配置 ESLint 和 Prettier，在一开始会有冲突。 于是我们需要在 项目内 .eslintrc.js配置一些额外的东西 module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended'
数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
wuyxinu的博客
02-13 5049
数据可视化-echarts入门、常见图表案例及项目案例 一、简介 一、数据可视化简介 什么是数据可视化？ 数据可视化是将数据库中每一个数据项作为单个图元元素表示，大量的数据集构成数据图像，同时将数据的各个属性值以多维数据的形式表示，可以从不同的维度观察数据，从而对数据进行更深入的观察和分析；主要是借助于图形化手段，清晰有效地传达与沟通信息。 二、echarts简介 ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备
el-tree 解决横向滚动条和纵向滚动条问题
wuyxinu的博客
04-22 4138
如题，在el-tree所处的代码块中，加入滚动条，使其能够滚动 使用overflow:scroll 即可 overflow定义:设定如果内容溢出元素设定范围后该怎么做. overflow:visible;默认属性,就是毫不作为,让内容跑到元素外面去. overflow:hidden;常用属性,超出的部分给他隐藏了. overflow:auto;常用属性,父元素中内置滚动条来处理,根据内容的具体宽高生成上下或左右滚动条. overflow:scroll;在父元素中强制内置滚动条,即使内容并没有超出元素给定宽高
JavaScript中使用RequestAnimationFrame优化动画效果和性能学习
wuyxinu的博客
03-05 3092
一、概述 1、介绍 进入web2.0时代，在网页中实现动画已经不再局限于一种方法 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition; 你还可以用通过在canvas上作图来实现动画，也可以借助jQuery动画相关的API方便地实现; 当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画，前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果。 reque
JavaScript设计模式浅析
wuyxinu的博客
04-25 2046
JavaScript设计模式浅析JavaScript设计模式浅析一、工厂模式1、简单的工程模式2、工程模式实例二、建造者模式1、建造者模式例子三、单体模式1、普通创建对象方式2、单体模式创建对象四、装饰器模式1、装饰器模式例子五、组合模式1、组合模式例子 JavaScript设计模式浅析 一、工厂模式 工程模式是一种比较简单的设计模式，主要用来创建对象用的 1、简单的工程模式 //1.简单的工程模式.html <!DOCTYPE html> <html lang="en"> <
Webpack5 file-loader、url-loader打包url引入一张图片生成两个图片，一个无法加载
wuyxinu的博客
02-16 2010
最近在学习webpack5 Webpack5 file-loader、url-loader打包url引入的图片生成两个图片，一个无法加载。 但是页面引入的却是这个无法加载的图片 就算是使用了file-loader的outputPath，也会发现，生成的无效图片并不会进入到outputPath中指定的路径里面。 问题原因： css-loader版本不同。 css-loader 6.0.0以上版本。对引入背景图片的url解析方式不一样，导致生成了两个图片（一个正常由file-loader解析生成，一个仅由c
Vue 用createElement 自定义列表头
wuyxinu的博客
07-01 1907
文章目录Vue 用createElement 自定义列表头一、前言二、需求实现效果三、知识点1、createElement 参数深入 data 对象2、createElement 创建元素过程四、具体实现及代码1、第一步：创建需要自定义列表头的table二、第二步：创建自定义组件封装el-popover三、局部注册组件并手写createElement五、扩展知识点1、Vue源码9个基础方法 Vue 用createElement 自定义列表头 一、前言 最近产品有需求，想要把一个搜索框放入到列表头中，一般的属
Webpack从入门到进阶（一）---附沿路学习案例代码
wuyxinu的博客
02-28 1435
Webpack从入门到进阶（一）—附沿路学习案例代码 一、Webpack简介 1、前端发展的几个阶段 无论是作为专业的开发者还是接触互联网的普通人，其实都能深刻的感知到Web前端的发展是非常快速的 对于开发者来说我们会更加深有体会； 从后端渲染的JSP、PHP，到前端原生JavaScript，再到jQuery开发，再到目前的三大框架Vue、React、Angular； 开发方式也从原来的JavaScript的ES5语法，到ES6、7、8、9、10，到TypeScript，包括编写CSS的预处理器
现代JavaScript面向对象编程探索
在JavaScript中，面向对象编程是一种常用的设计模式，它允许开发者通过模拟现实世界中的对象来创建复杂且易于维护的代码结构。JavaScript自诞生起就支持面向对象特性，尽管其面向对象的方式与其他传统语言（如Java或...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值