JS面向过程+面向对象编程区别，原型的应用

最新推荐文章于 2024-03-07 18:57:40 发布

CodeCxil

最新推荐文章于 2024-03-07 18:57:40 发布

阅读量318

点赞数 1

分类专栏：前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_41098074/article/details/127664018

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.1面向过程编程

思路：面向过程就是分析出解决问题所需要的步骤，再用函数把这些步骤一步一步实现，使用的时候一个一个的依次调用即可。

1.2面向对象过程

思路：把事务分解成一个一个对象，然后由对象之间分工与合作。

面向对象是以对象功能来划分问题的而不是步骤。

特性：封装性，继承性，多态性

2构造函数

封装是面向对象思想中比较重要的一部分，JS面向对象可以通过构造函数实现的封装。

同样的将变量和函数组合到了一起并能通过 this 实现数据的共享，所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的

总结：

①构造函数提现了面向对象的封装特性

②构造函数实例创建的对象彼此独立，互不影响

function Star(uname,age){
this.uname = uname
this.age=age
this.sing = function(){
console.log('我会唱歌')}
}
//实例对象，获得了构造函数中封装的所有逻辑
const ldh = new Star('刘德华',18)
const zxy = new Star('张学友',18)

2.1 封装是面向对象思想中比较重要的一部分，JS面向对象可以通过构造函数实现的封装

之前我们学过的构造函数的方法很好用，但是存在浪费内存的问题

2.2 面向对象编程的特性，比如封装性，继承性等，可以借助构造函数来实现。

总结：JS面向对象可以借助构造函数来实现。但是构造函数存在浪费内存的问题。

3 原型

上述说构造函数有浪费内存的问题，所以这个问题通过什么来解决？

原型！

3.1原型

原型是什么？一个对象。我们也成为了prototype原型对象。

每一个构造函数都有一个prototype属性（也就是原型对象）

这个对象可以挂载函数，因此对象实例化不会多次创建原型上的函数来节约内存

我们通常把一些不需要变化的方法，直接定义在prototype对象上，这样所有对象的实例化就可以共享这些方法。

构造函数和原型对象中this 都是指向实例化的对象

<script>
        //构造函数
        function Star(uname,age){
            //this的指向是实例化对象
            this.uname=uname;
            this.age=age;
            // this.sing =function(){
            //     console.log('唱歌')
            // }
            // this.rap=function(){
            //     console.log('rap')
            // }
        }

        const ldh = new Star('ldh',18)
        const zxy = new Star('zxy',18)

        console.dir(Star.prototype)

        //构造函数的原型对象 prototype 
        Star.prototype.sing=function(){
            console.log('唱歌')
        }
        //也可以直接用 赋值
        Star.prototype.eye=2;

        console.log(ldh.eye);
        
        console.log(ldh.sing===zxy.sing)
    </script>

3.1.2this 指向问题？

构造函数和原型对象中的this都指向实例化的对象

案例对比