JS:js的原型对象考点(*****五颗星)

1.原型对象的概念

定义:每一个构造函数都有一个与之相关联的对象,该对象称之为原型对象。

功能:每个实例对象都能共享其原型对象上的属性和方法,减少内存分配。

目的:解析构造函数创建对象过程中发生的问题

问题1:每次创建的新的对象里面的方法都会开辟一个新的对象内存空间,不是同一个引用地址

从内存资源分配考虑,我们无需为每个对象创建并分配一份新的函数对象(完全相同),这种函数大家最好共享同一份

<script>
        // 目的:解析构造函数创建对象过程中发生的问题
        function Person(name){
            this.name=name
            this.eat=function(){
                console.log(this.name+"爱打球")
            }
        }
        var p=new Person("张三")
        var p2=new Person("李四")
        p.eat()//张三爱打球
        p2.eat()//李四爱打球

        // 问题:p.eat和p2.eat是同一个引用地址?不是,每次都开辟了新的内存空间
        // 引用数据类型比较引用地址
        // 过程:
        var p=new Person("张三")//p.eat=新的函数
        var p2=new Person("李四")//p2.eat=新的函数
        // 每次创建一个对象都开辟了新的独立内存空间,有栈内存和对内存
        console.log(p.eat==p2.eat)//false 不是同一个引用地址
</script>

问题1: 解决方法1:方法作为全局函数,可以把函数单独拿出来,定义全局,函数名做方法对象

解决方法共享的目的是达到了,但是又产生了新的问题,我们面向对象编程的目的是为了减少全局变量,而这种写法又增加了全局变量,与我们编程思想产生了冲突。完美的解决办法:需要在构造函数上想办法,在构造函数身上开辟一个区域,来存放我们的公共方法——原型对象

<script>
        // 解决方法1:将对象中的方法属性写成全局函数
        function eat(){//全局函数
            console.log(this.name+"爱打球")
        }
        function Person(name){
            this.name=name
            this.eat=eat//每一次都赋值,全局函数wat的内存地址
        }
        var p=new Person("张三")
        var p2=new Person("李四")
        console.log(p.eat===p2.eat)//true
</script>

问题1:解决方式2:从构造函数身上想办法---原型对象

定义:每一个构造函数都有一个与之相关联的对象,该对象称之为原型对象。

功能:每个实例对象都能共享其原型对象上的属性和方法,减少内存分配。

1. 构造函数.prototype获取原型对象

2. 构造函数.prototype.成员名 = 成员值,在原型对象上添加成员的方法

原型对象: 每一个构造函数都有一个与生俱来的对象 ----- 原型对象

                功能: 共享方法给 创建出来的新对象 使用

                构造函数获取原型对象-------Person.prototype

给原型对象添加成员(方法),都是由原型对象共享的方法,是同一个引用地址

<script>
       function Person(name){
            this.name=name
       }
       console.log(Person.prototype)
    </script>

<script>
       function Person(name){
            this.name=name
       }
		// 给原型对象添加成员(方法)
       Person.prototype.eat=function(){
            console.log(this.name+"爱打球")
       }
       var p=new Person("张三")
       var p2=new Person("李四")
	   //都是由原型对象共享的方法,是同一个引用地址
       console.log(p.eat===p2.eat)//true
       console.log(Person.prototype)
</script>

2.原型对象的相关概念

对象的成员有属性和方法

1.构造函数---构造器(类)-----创建对象用

**构造函数**:Person,和new关键字一起创建对象

2.原型对象-----构造函数对象身上的属性prototype,构造函数与生俱来的对象

**原型对象**:Person.prototype,

3.实例化-------new的过程,构造函数创建实例对象的过程

**实例化:**由构造器创建实例对象的过程称之为实例化

4.实例对象-----构造函数创建出来的新对象p

**实例对象**:由构造器创建出来的对象称之为实例对象

5.对象的成员:属性+方法:

1.原型成员--------给构造函数的原型上添加的成员(属性或方法)

**原型成员:**原型对象上的属性和方法,eat(),使用该原型对象对应构造器创建出来的所有实例对象都能访问

2.实例成员------构造函数里面的属性或方法

**实例成员:**实例对象上的属性和方法,name,age,只能当前实例对象才能访问

3.静态成员---给构造函数身上添加的成员,实例不能使用静态成员,静态成员只能给构造函数使用

**静态成员:**直接添加在构造函数上的属性和方法,只能使用构造函数才能访问

<script>
        // 对象的成员有属性和方法
        // 1. 构造函数----构造器(类)----创建对象用---------母亲
        function Person(name, age) {
            // 5. 实例成员-----name age
            this.name = name;
            this.age = age;
        }

        // 2. 原型对象----构造函数与生俱来的对象(夫妻)-----父亲
        // Person.prototype    //函数对象身上的属性prototype
        console.dir(Person);//ƒ Person(name, age)

        // 6. 原型成员-----eat
        Person.prototype.eat = function () {
            console.log(this.name + "爱吃木桶饭");
        }

        // 3. 实例对象: 构造函数创建出来的新对象p
        // 4. 实例化: new的过程 构造函数创建实例对象的过程
        var p = new Person("张三", 20);


        // 7. 静态成员-------- 给构造函数身上添加的成员
        Person.showInfo = "这是一个人类";
        console.log(p.showInfo);//undefined 实例不能使用静态成员
		console.log(p.prototype);//undefined 实例不能使用静态成员
        console.log(Person.showInfo);//这是一个人类 *** 静态成员只能给构造函数使用

        //

剩余60%内容,订阅专栏后可继续查看/也可单篇购买

前端面试题 文章被收录于专栏

前端面试的一些常问问题、问题的具体实现(可直接运行)以及底层原理

全部评论
原型对象好有意思哈哈
1 回复 分享
发布于 2023-02-21 09:12 山东
完美解决同一个引用地址的问题
1 回复 分享
发布于 2023-02-21 09:27 四川

相关推荐

一名愚蠢的人类:多少games小鬼留下了羡慕的泪水
投递荣耀等公司10个岗位
点赞 评论 收藏
分享
贪食滴🐶:你说熟悉扣篮的底层原理,有过隔扣职业球员的实战经验吗
点赞 评论 收藏
分享
评论
点赞
收藏
分享
牛客网
牛客企业服务