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的原型对象、原型链和面向对象的特点
Public Static Void Main
01-14 1031
一、Object类型1.1、JavaScript面向对象的特点js虽也是面向对象的语言，但与”正统”的面向对象语言(如java)有很大不同： java拥有类和对象，其继承是从类来继承；js只拥有对象，而没有真正意义上的类(只有名义上的类)，继承也是从对象来继承。 在java中若定义了一个类，则该类的所有对象拥有完全相同的属性和方法；js的对象具有动态性，在任何时候都可以随意修改属性和方法，所以在js
浅析JavaScript面向对象编程的实现.pdf
最新发布
01-02
浅析JavaScript面向对象编程的实现.pdf
Javascript面向对象编程思考与总结
planetttttt的博客
07-20 156
Javascript面向对象编程 什么是对象？万物皆对象 -对象：特指的某个事物，具有属性和方法（一组无序的属性的集合） 特征：-----> 属性 行为：----->方法 对象是单个事物的抽象 对象是一个容器，封装了属性（prototype）和方法（method）属性是对象的特征，方法是对象的行为 ECMAscript-262 把对象定义为：无序属性的集合，其属性可以包括值、对象或者函数。严格来说对象是一组没有特定顺序的值 什么是面向对象 面向对象编程 — (Object Oriented
JavaScript高级教程（面向对象编程）
一只努力搬砖的打工妹纸
01-25 5216
面向对象编程 有两大编程思想：面向过程和面向对象； 面向过程编程POP(Process-oriented programming) 面向过程即分析出解决问题所需要的步骤，然后用函数将这些步骤一步步实现，使用的时候再一个个的一次调用就可以了； 即将大象装进冰箱，从面向过程来看，需要打开冰箱门、装进去大象、关上冰箱门 面向对象编程OOP(Object Oriented Programming) 面向对象即把事务分解成为一个个对象，然后由对象之间分工与合作；是以对象功能来划分问题，而不是步骤；在面向对
Javascript 浅析面向对象
hopefullman的博客
03-19 128
1、面向对象 面向对象的语言最基本的标志就是类的概念。什么是类？类是包含多个属性和方法的集合，类的实例即对象。 面向对象的三大特征是继承、封装、多态。JS可以模拟实现继承和封装，但是无法模拟实现多态，所以我们说JS是一门基于对象的语言，而非是面向对象的语言。 Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象...
JavaScript面向对象程序设计—创建对象的模式
努力，可能成功！放弃，注定失败！
09-13 580
JS本身为我们提供了Array、Date、Math等不少对象（见《浅析JavaScript的对象系统》），但在实际开发中我们使用最多的还是自定义对象。自定义对象是一门值得研究的学问。往浅了讲，它关系到代码量、封装性、代码是否优雅；往深了讲，它又涉及到内存开销、设计模式乃至JavaScript语言的核心。下面就一起循序渐进地看看如何更好地创建一个对象。 1. 基本模式 var person
JS面向对象编程浅析
洪文聊架构
10-02 927
Object是javascript中所有类的基类 var p1=new Object();//通过Object直接创建对象，这里p1就是对象了 p1.name='test';//给p1的属性赋值 通过Object创建的类有以下主要属性：         1、contructor 对象构造函数         2、prototype  原型，获得类的prototype对象，st
JavaScript面向对象编程
yangxuehui的专栏
04-27 384
优美的面向对象JS编程风格var testCls=function(arg1){        //对象内部公有变量，不允许外部访问        var a=arg1;        var b=10;        var alertB=function(){                alert(b);        }        //外部可访问区域        return 
浅析 JavaScript 函数式编程
程序员成长指北
04-23 296
前言随着React的流行，函数式编程在前端领域备受关注。尤其近几年，越来越多的类库偏向于函数式开发：lodash/fp，Rx.js、Redux的纯函数，React16.8推出的hooks，...
JavaScript (JS) 面向对象编程 浅析 (含对象、函数原型链、闭包解析)
02-24 93
1. 构造函数原型对象：prototype ① 构造函数独立创建对象，消耗性能 function Person(name) { this.name = name; this.sayHello = function () { console.log("Hello,my name is " + this.name) ...
JavaScript的面向对象特性浅析与范例.pdf
01-02
"JavaScript面向对象特性浅析与范例" JavaScript是一种基于原型的解释型语言，它允许在任意时刻给一个对象添加任意多的属性和方法。 JavaScript的面向对象特性是指它可以实现面向对象编程的部分特性，而不是完全...
JavaScript的面向对象特性浅析与范例
09-14
传统方式对JavaScript的应用基本上是基于过程模型的，若在JavaScript中利用面向对象的思想进行代码编写，将会使得代码具有良好的结构和逻辑性，更便于管理和...本文让读者看到JavaScript如何实现面向对象编程并提供范例
JavaScript new对象的四个过程实例浅析
10-18
在JavaScript中，`new`操作符是用于创建和初始化一个新对象的关键字，它与函数紧密相关，尤其在面向对象编程中发挥着重要作用。这里我们将深入理解`new`对象的四个核心过程，通过实例来解析它们的工作原理。 1. **...
浅析在javascript中创建对象的各种模式
11-25
最近在看《javascript高级程序设计》（第二版） javascript中对象的创建 •工厂模式 •构造函数模式 •原型模式 •结合构造函数和原型模式 •原型动态模式 面向对象的语言大都有一个类的概念，通过类可以创建多...
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 4994
数据可视化-echarts入门、常见图表案例及项目案例 一、简介 一、数据可视化简介 什么是数据可视化？ 数据可视化是将数据库中每一个数据项作为单个图元元素表示，大量的数据集构成数据图像，同时将数据的各个属性值以多维数据的形式表示，可以从不同的维度观察数据，从而对数据进行更深入的观察和分析；主要是借助于图形化手段，清晰有效地传达与沟通信息。 二、echarts简介 ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备
el-tree 解决横向滚动条和纵向滚动条问题
wuyxinu的博客
04-22 4082
如题，在el-tree所处的代码块中，加入滚动条，使其能够滚动 使用overflow:scroll 即可 overflow定义:设定如果内容溢出元素设定范围后该怎么做. overflow:visible;默认属性,就是毫不作为,让内容跑到元素外面去. overflow:hidden;常用属性,超出的部分给他隐藏了. overflow:auto;常用属性,父元素中内置滚动条来处理,根据内容的具体宽高生成上下或左右滚动条. overflow:scroll;在父元素中强制内置滚动条,即使内容并没有超出元素给定宽高
面向对象的JavaScript基础.pdf
08-04
类的概念有助于抽象复杂性，使得程序设计更具模块化，便于理解和维护。 在类的定义中，比如Rob和Emilee这两个对象，我们可以看到它们有共同的特征如眼睛、肩膀、手、身高和呼吸行为，这些都是类的实例属性。类可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值