【js原型和原型链】

js原型和原型链

参考文章链接: link

一、构造函数和原型对象中的this

指向实例对象

js 复制代码
    // 定义构造函数
    function Star(name,age){
        this.name = name;
        this.age = age;
        console.log(this,'我是构造函数的this')
    }
    // 公共的属性或方法
    Star.prototype.sing=function(){
        console.log('我是会唱歌的明星')
        console.log(this,'我是原型对象中的this')
    }
    // 创建实例对象
    const obj=new Star('周深',18)
    obj.sing()

二、原型对象的constructor属性

默认原型对象的的constructor属性是指向构造函数(找自己的爸爸)的,但是当原型对象需要定义多个公共的方法时,原型对象会重新以赋值的方式进行定义,此时的constructor属性需要自己手动添加

js 复制代码
    // 定义构造函数
    function Star(name,age){
        this.name = name;
        this.age = age;
    }
    // 公共的属性或方法
    // 定义多个方法
    Star.prototype={
        constructor: Star,
        sing:function(){
            console.log('我会唱歌')
        },
        dance:function(){
            console.log('我还会跳舞')
        }
    }
    
    // 创建实例对象
    const obj=new Star('单依纯',18)
    console.log(Star.prototype.constructor)

三、原型链

js 复制代码
    // 定义构造函数
    function Star(name,age){
        this.name = name;
        this.age = age;
    }
    // 公共的属性或方法
    // 定义多个方法
    Star.prototype={
        constructor: Star,
        sing:function(){
            console.log('我会唱歌')
        },
        dance:function(){
            console.log('我还会跳舞')
        }
    }
    
    // 通过构造函数创建实例对象
    const obj=new Star('单依纯',18)
    // 原型对象和实例对象找爸爸 构造函数
    console.log(Star.prototype.constructor===obj.constructor)
    // 构造函数找自己的大儿子 原型对象
    console.log(Star.prototype)
    // 实例对象找原型对象 二儿子去找大儿子玩
    console.log(obj.__proto__)
    // 判断是不是都在找大儿子
    console.log(Star.prototype===obj.__proto__)
    //  原型链 大儿子去找妈妈
    console.log(Star.prototype.__proto__)
    // 判断一下是不是顶点object.prototype
    console.log(Star.prototype.__proto__===Object.prototype)

四、关系图

五、普通函数和函数对象

所有Function的实例都是函数对象,其他的都是普通对象,Function实例的实例就是普通对象

所以回过头来我们会发现实例对象只是一个普通对象,obj是没有prototype属性的,而构造函数是一个函数对象,只有函数对象才有prototype这个原型属性

而prototype可以帮助我们定义或者重写一些新的公共方法

Object, Function, Array, String, Number, Boolean, Date 等都是 JS 内置的函数对象。

相关推荐
黄毛火烧雪下21 分钟前
React 为什么要自定义 Hooks?
javascript·react.js·ecmascript
莲青见卿35 分钟前
react+echarts实现变化趋势缩略图
javascript·react.js·echarts
ZzMemory2 小时前
深入理解JS(八):事件循环,单线程的“一心多用”
前端·javascript·面试
汪子熙4 小时前
浏览器环境中 window.eval(vOnInit); // csp-ignore-legacy-api 的技术解析与实践意义
前端·javascript
BUG收容所所长5 小时前
🤖 零基础构建本地AI对话机器人:Ollama+React实战指南
前端·javascript·llm
小高0075 小时前
🚀前端异步编程:Promise vs Async/Await,实战对比与应用
前端·javascript·面试
Spider_Man5 小时前
"压"你没商量:性能优化的隐藏彩蛋
javascript·性能优化·node.js
用户87612829073745 小时前
对于通用组件如何获取表单输入,区分表单类型的试验
前端·javascript
Bdygsl5 小时前
前端开发:JavaScript(6)—— 对象
开发语言·javascript·ecmascript
Mintopia6 小时前
AIGC Claude(Anthropic)接入与应用实战:从字节流到智能交互的奇妙旅程
前端·javascript·aigc