前端 JS面向对象 原型 prototype

目录

一、问题引出

二、prototype原型对象

三、小结

四、constructor

五、__proto__对象原型

六、原型链


一、问题引出

由于JS的构造函数存在内存浪费问题:

javascript 复制代码
    function Star(name,age){
       this.name=name
       this.age=age
       this.sing=function () {
           console.log("唱歌!")
       }
   }
   let star01=new Star("Jack",18)
   let star02=new Star("Mark",20)
   console.log(star01.sing==star02.sing)

打印:不同实例对象的动态方法是不同的,会开出新的内存区域用于存储相同的方法。

对此问题,提出了原型处理方法。

二、prototype原型对象

我们可以将不变的方法直接定义在prototype属性中,以减少内存开销。

对上面的问题代码进行优化:

javascript 复制代码
    function Star(name,age){
       this.name=name
       this.age=age
   }
   Star.prototype.sing=function (){
       console.log("唱歌!")
   }
   let star01=new Star("Jack",18)
   let star02=new Star("Mark",20)
   console.log(star01.sing==star02.sing)

打印:可以看到两个实例对象的该方法是同一个,证明都使用了同一个原型里的方法,没有新开内存拷贝。

三、小结

1、公共属性写到构造函数里;

2、公共函数写到prototype原型对象里;

3、构造函数里的this就是指向实例化的对象;

4、原型对象里的this还是指向实例化的对象。

四、constructor

prototype里的属性constructor属性就是帮原型确定它的构造函数是谁,如,构造函数Star的prototype里的constructor属性就是指向Star构造函数的。

作用:指向原型对象的构造函数。

javascript 复制代码
    function Star(){

   }

   console.log(Star.prototype)
   Star.prototype={
       sing:function (){
           console.log("唱歌")
       },
       dance:function (){
           console.log("跳舞")
       }
   }
   console.log(Star.prototype)

打印:没构造前,有constructor属性,构造后没有了

可以看到,上面这种写法直接给prototype赋值了新值,没有了constructor对象标识,正确写法应该是:

javascript 复制代码
    function Star() {

    }

    console.log(Star.prototype)
    Star.prototype = {
        //重新指回这个原型的构造函数 Star
        constructor: Star,
        sing: function () {
            console.log("唱歌")
        },
        dance: function () {
            console.log("跳舞")
        }
    }
    console.log(Star.prototype)

打印:

五、__proto__对象原型

每个实例化的对象都有一个__proto__,而这个__proto__就是指向构造函数的prototype对象的。这样一来,每个实例化对象都可以访问prototype里的数据了。

1、这是一个只读属性;

2、

javascript 复制代码
    function Star() {

    }
    const star01=new Star()
    console.log(star01.__proto__ === Star.prototype)

打印:这里可以看到__proto__指向的是构造函数的原型对象

此外,__proto__实例化对象的原型中也有constructor,并且是指向prototype原型对象中的constructor的。

六、原型链

只要是对象就是__proto__,prototype对象中也有__proto__属性,我们按照prototype的__proto__可以一级一级的指向,到最顶层Object.prototype.__proto__指向为null。

使用场景:比如某个对象需要调用一个方法,而这个方法在当前对象里没有,就会向上一级查找是否有该方法,若仍然没有再往上寻找prototype里是否有该方法,依次类推,直至到顶层prototype里查找,指向为null时结束查找。

可以通过instanceof来判断对象是否在一个原型链上。

相关推荐
GISer_Jing20 分钟前
React渲染相关内容——渲染流程API、Fragment、渲染相关底层API
javascript·react.js·ecmascript
山猪打不过家猪21 分钟前
React(五)——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo
前端·javascript·react.js
前端青山23 分钟前
React事件处理机制详解
开发语言·前端·javascript·react.js
科技D人生24 分钟前
Vue.js 学习总结(14)—— Vue3 为什么推荐使用 ref 而不是 reactive
前端·vue.js·vue ref·vue ref 响应式·vue reactive
对卦卦上心28 分钟前
React-useEffect的使用
前端·javascript·react.js
练习两年半的工程师28 分钟前
React的基本知识:事件监听器、Props和State的区分、改变state的方法、使用回调函数改变state、使用三元运算符改变state
前端·javascript·react.js
啵咿傲28 分钟前
在React中实践一些软件设计思想 ✅
前端·react.js·前端框架
GIS好难学1 小时前
《Vue零基础入门教程》第二课:搭建开发环境
前端·javascript·vue.js·ecmascript·gis·web
程序员黄同学2 小时前
Python 中如何创建多行字符串?
前端·python
anyup_前端梦工厂2 小时前
uni-app 认识条件编译,了解多端部署
前端·vue.js·uni-app