JS高级面向过程与对象,什么是原型,原型对象,原型继承与原型链

最新推荐文章于 2024-07-15 14:11:16 发布

白胡子的笑

最新推荐文章于 2024-07-15 14:11:16 发布

阅读量172

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_67251803/article/details/124970595

版权

JS高级

编程思想

面向过程介绍

●面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。 ●举个栗子：蛋炒饭

●面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。

面向对象介绍

目标：从生活例子了解什么是面向对象编程 ●面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。

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

●在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。 ●面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。

●面向对象的特性：

封装性

继承性多态性

编程思想-面向过程和面向对象的对比

生活离不开蛋炒饭，也离不开盖浇饭，选择不同而已，只不过前端不同于其他语言，面向过程更多

构造函数

●封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。 ●同样的将变量和函数组合到了一起并能通过this实现数据的共享，所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的

总结

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

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

●封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。 ●前面我们学过的构造函数方法很好用，但是存在浪费内存的问题,因为他new一个就会在堆里面开辟一个空间

相同的功能,因为new了多个所以开辟了多个空间,所以存在浪费内存的问题

●面向对象编程的特性：比如封装性、继承性等，可以借助于构造函数来实现 前面我们学过的构造函数方法很好用，但是存在浪费内存的问题

因为两个函数不相等,所以在堆里面会开辟两个不同的空间,如果有十个就会开辟十个不同的空间,所以浪费内存

Js实现面向对象需要借助于谁来实现？ 构造函数 2.构造函数存在什么问题？ 浪费内存

所以:我们希望所有的对象使用同一个函数，这样就比较节省内存，那么我们要怎样做呢？

利用原型实现

↓

原型

原型对象prototype

●构造函数通过原型分配的函数是所有对象所共享的。

●JavaScript规定，每一个构造函数都有一个prototype属性，指向另一个对象，所以我们也称为原型对象 ●这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存 ●我们可以把那些不变的方法，直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法。

总结:

1.原型是什么？一个对象，我们也称为prototype为原型对象 2.原型的作用是什么？共享方法可以把那些不变的方法，直接放在prototype对象上

构造函数和原型的this指向

<script>
let that
function Star(uname){
// that = this
// console.log(this)
this.uname = uname
}
//原型对象里面的函数this指向的还是实例对象Ldh
Star.prototype.sing =function (){
that = this
console.log('唱歌'）
}
// 实例对象 Ldh
//构造函数里面的this就是实例对象 Ldh
const 1dh ＝new Star('刘德华'）
ldh.sing()
console.log(that === ldh)
</script>

数组扩展最大值的求和方法

<script>
//自己定义数组扩展方法
求和和最大值
//1.我们定义的这个方法，任何一个数组实例对象都可以使用
//2.自定义的方法写到数组.prototype身上
//1．最大值
const arr = [1, 2, 3]
Array.prototype.max = function () {
//展开运算符
return Math.max(...this)
//原型函数里面的this指向谁？实例对象 arr
}
Array.prototype.min = function (){
//展开运算符
return Math.min(...this)
//原型函数里面的this指向谁？实例对象 arr
}
console.log(arr.max())
console.log([2, 5, 9].max())
console.log(arr.min())
// const arr = new Array(1, 2)

// console.log(arr)
//3.求和方法
Array.prototype.sum = function () {
return this.reduce((prev, item) => prev + item, 0)
}
console.log([1, 2, 3].sum())
console.log([11, 21, 31].sum())

</script>

constructor 属性

在哪里？每个原型对象里面都有个constructor属性（constructor构造函数）作用：该属性指向该原型对象的构造函数，简单理解，就是指向我的爸爸，我是有爸爸的孩子

每一个构造函数里面都有一个原型对象,是通过构造函数的prototype指向原型对象的,在原型对象里面也有一个属性叫

constructor,他又指回了构造函数

使用场景：如果有多个对象的方法，我们可以给原型对象采取对象形式赋值. 但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象constructor就不再指向当前构造函数了此时，我们可以在修改后的原型对象中，添加一个constructor指向原来的构造函数。

prototype定义了那些不变的方法,所有对象的实例化可以共享这些方法,prototype里面有个默认属性constructor,它用于指回构造函数

 <script>
        function Star() {

        }
        Star.prototype = {
            constructor: Star,
            sing: function() {
                console.log('唱歌');
            },
            say: function() {
                console.log('年龄');
            }
        }
        console.log(Star.prototype);
    </script>

如果我们修改了原来的原型对象，用等号给原型对象赋值的是一个对象，则必须手动的利用constructor 指回原来的构造函数,不然找不到原来的构造函数,修改完数据因为找不到以前的构造函数,所以就会导致赋值失败的情况,所以这个时候要constructor.构造函数名,指回去

1.constructor属性的作用是什么？ 指向该原型对象的构造函数

对象原型proto

构造函数可以创建实例对象，构造函数还有一个原型对象，一些公共的属性或者方法放到这个原型对象身上但是为啥实例对象可以访问原型对象里面的属性和方法呢？

只要是对象都会有一个原型_proto_,这个原型指向的是原型对象，之所以我们对象可以使用构造函数prototype 原型对象的属性和方法，就是因为对象有proto原型的存在。

注意： proto是JS非标准属性 [[prototype]]和proto意义相同用来表明当前实例对象指向哪个原型对象prototype proto对象原型里面也有一个constructor属性，指向创建该实例对象的构造函数

对象身上系统自己添加一个__proto__ 指向我们构造函数的原型对象 prototype

对象都会有一个属性____proto____指向构造函数的prototype 原型对象，之所以我们对象可以使用构造函数prototype 原型对象的属性和方法,就是因为对象有proto原型的存在。

每一个构造函数里面都有一个原型对象,是通过构造函数的prototype指向原型对象的,在原型对象里面也有一个属性叫

constructor,他又指回了构造函数可以理解为爸爸与儿子的关系,爸爸说看这是我的儿子,儿子说看这是我的爸爸,只要new了构造函数就会产生一个实例对象,所以构造函数可以指向实例对象,

实例对象里面的对象原型proto里面也有一个constructor属性,他会指向原型对象,实例对象里面也有一个constructor,他也会指回构造函数

实例对象Star里面的proto会指向原型对象,原型对象里面的constructor会指回构造函数,所以实例对象Star是通过原型对象的constructor指回构造函数的

总结

构造函数有两个孩子,原型对象和实例化对象,两个孩子与他们的父亲互相指他,而实例化对象会指向原型对象

1.prototype是什么？哪里来的？原型（原型对象）构造函数都自动有原型 2.constructor属性在哪里？作用干啥的？ prototype原型和对象原型_proto__里面都有 都指向创建实例对象/原型的构造函数

原型继承

继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，JavaScript中大多是借助原型对象实现继承的特性。龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义。我们来看个代码：

封装-抽取公共部分

把男人和女人公共的部分抽取出来放到人类里面

2.继承-让男人和女人都能继承人类的一些属性和方法

把男人女人公共的属性和方法抽取出来People 然后赋值给Man的原型对象，可以共享这些属性和方法注意让constructor指回Man这个构造函数

3.问题：

如果我们给男人添加了一个吸烟的方法，发现女人自动也添加这个方法

3.问题：--原因

男人和女人都同时使用了同一个对象，根据引用类型的特点，他们指向同一个对象，修改一个就会都影响

4.解决：

需求：男人和女人不要使用同一个对象，但是不同对象里面包含相同的属性和方法 答案：构造函数 new每次都会创建一个新的对象

因为只有构造函数才能创造实例化对象,对象不能创造实例化对象,且两个函数引用对象里面的公共内容,其中一个函数给这个公共对象做了修改或增加,那么两个函数里面的内容都会变,因为他们表面是引用公共对象的,实际上是引用了对象在堆里面的内容,所以完善写法是把对象储存公共数据的方法改为:用构造函数存储数据,因为只有构造函数才能创造实例化对象,这样就可以在堆里面开辟两个不同的内存空间,这样既实现了引用公共数据,又实现了两个引用数据的函数互不影响

继承写法完善

思路真正做这个案例，我们的思路应该是先考虑大的，后考虑小的 1.人类共有的属性和方法有那些，然后做个构造函数，进行封装，一般公共属性写到构造函数内部，公共方法，挂载到构造函数原型身上。 2.男人继承人类的属性和方法，之后创建自己独有的属性和方法 3.女人同理

综合案列

 <script>
        function Person() {
            this.foot = 2,
                this.head = 1,
                this.eye = 2,
                this.say = () => {
                    '你好'
                },
                this.sing = () => ('忘情水')
        }

        function Man() {

        }
        // Person()函数里面放着公用的数据,两个函数要是想调用里面的数据,必须采用实例化对象的方法,
        //因为不实例化对象,只要其中一个函数修改了Person()里面的数据,另外一个也会跟着改变,所以
        //Person()要实例化对象,Man()要实例化对象,Woman也要实例化对象,只要想调用Person()这个公共内容的构造函数
        //调用的函数都需要实例化对象,被调用的也需要实例化对象,这样才能数据互不影响,成功继承里面的数据
        //Man的prototype属性指向了new Person()这个实例化对象,现在Man里面有了他的属性和方法
        Man.prototype = new Person()
            //指向了new Person()这个实例化对象之后,用constructor指回Man才能找到里面的成员
        Man.prototype.constructor = Man
            //因为Man也是一个构造函数,所以他也要实例化对象来存储数据
        const pink = new Man()
        Man.prototype.smoking = () => {
            '我要抽烟'
        }

        function Woman() {
            this.baby = '孩子'
        }
        Woman.prototype = new Person()
        Woman.prototype.constructor = Woman
        const red = new Woman()
        console.log(red);
        console.log(pink);
    </script>

原型链

基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链

只要是对象他里面都有一个原型proto,proto这个原型他指向的是原型对象,ldh这个实例对象的proto指向的是Star原型对象,这个Star原型对象里面也有一个proto,他指向的是Object原型对象,Object原型对象里面也有一个proto,他指向的结构为空,所以这样就形成了一条链子,为成员在查找的时候提供了一条路,如果在ldh实例对象上有这个成员,就会打印出来,如果没有proto指向Star原型对象,如果没有,proto指向Object原型对象,如果Object原型对象也没有就找不到这个成员,返回null

只要是对象都有proto,只要是原型对象里面就有constructor,指回构造函数

这就叫做原型链,他们从下往上查找的规则就是原型链查找规则

<script>
function Star(uname, age) {
this.uname = uname;
this.age = age;
Star.prototype.sing = function() {
console.log（'我会唱歌'）;
Star.prototype.sex='女';
// object.prototype.sex ='男';
var 1dh=new Star('刘德华'，18);
1dh.sex='男';
gonsole.log(1dh.sex);
</script>

从以上代码中可以看出.如果对象本身就有这个属性,原型对象也有这个属性,那么会优先使用对象身上的成员,如果没有就会使用原型对象的成员,就近原则

原型链-查找规则

①当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。 ② 如果没有就查找它的原型(也就是_proto指向的prototype 原型对象) ③如果还没有就查找原型对象的原型（Object的原型对象） ④依此类推一直找到Object为止（null） ⑤proto对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线

什么是原型链:

原型链实际上就是一种查找规则,我们想要一种属性和方法,首先去当前的实例化对象中去查找,如果找不到就通过--proto--去原型对象中查找,如果找不到,就通过原型对象中的--proto--去object中找,如果还找不到,就会返回null

instanceof 用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上

  <script>
        // function Object() {}
        console.log(Object.prototype)
        console.log(Object.prototype.__proto__)

        function Person() {}
        const ldh = new Person()
            // console.log(ldh.__proto __=== Person.prototype)

        // console.log(Person.prototype.__proto_  === Object.prototype)

        console.log(ldh instanceof Person) //true
        console.log(ldh instanceof Object) //true
        console.bog(ldh instanceof Array) //false
        console.log([1, 2, 3] instanceof Array) //true
        console.log(Array instanceof Object) //true
    </script>