IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> javascript中原型和原型链 -> 正文阅读

[JavaScript知识库]javascript中原型和原型链

1. 构造函数:我们通常把对象中一些公共的属性和方法抽取出来,封装到一个首字母大写的函数中,通过new关键字来调用这个函数,这样的函数就称为构造函数。

?2. 每一个构造函数身上都有一个prototype属性,该属性指向一个对象。因此我们称prototype为构造函数原型或构造函数原型对象??

3. 每一个实例化的对象身上都有一个?--proto-- 或者?[[prototype]] 属性,指向构造函数的原型prototype。称--proto-- 或者?[[prototype]]为对象原型??

4. 构造函数原型prototype和对象原型--proto--上有一个共同的函数constructor,指回构造函数本身

5.构造函数原型prototype本身也是一个对象,所以它身上有一个--proto属性。构造函数原型对象的prototype的对象原型--proto-- 指向的是一个Object原型对象。

5.1该原型对象可由constructor函数Object本身.

?5.2 而Object原型对象的对象原型--proto--指向 null 空。

6.完整的示意图如下所示:

(后附有相关代码 )

<script>                               
    //    1.构造函数 原型(原型对象)prototype
    // js规定每一个构造函数(构造函数是一种特殊的函数,与new搭配使用)都有一个prototype(原型对象)属性,指向一个对象,这个对象所有的属性和方法都会被构造函数所拥有
    var arr1 = [1, 23]
    function Star(uname, age) {
        // new执行时,先创建一个新的空对象,让this指向这个空对象,根据代码添加属性和方法,再返回新对象。不用返回return
        this.uname = uname;
        this.age = age
        // this.sing=function(){
        //     console.log("会唱歌")
        // }
    }
    // 一般情况下,我们的公共属性定义到构造里面,公共的方法我们定义到原型对象身上
    Star.prototype.sing = function () {
        console.log('会唱歌')
    }
    var ldh = new Star('刘德华', 19)
    var zxy = new Star('zuy', 20)
    console.log('1.1 构造函数原型prototype')
    console.dir(Star)
    console.log(zxy.sing === ldh.sing)
    // 1.1 小结:原型(原型对象)是每一额构造函数都有的一个对象prototype.作用是共享构造函数里面的方法

    //    2原型对象(_ _) __proto__或者 [[Prototype]]
    // 对象身上系统自己添加一个--proto--指向构造函数的原型prototyoe
    console.log('1.2 原型对象(_ _) __proto__')
    console.log(ldh, ldh.__proto__ === Star.prototype)

    //    3 constructor构造函数
    //  对象原型--proto--和构造函数原型身上都有一个属性constructor属性,它会指回构造函数本身
    console.log("1.3 constructor构造函数")
    console.log(Star.prototype)//构造函数原型
    console.log(ldh.__proto__)//对象原型
    console.log(Star.prototype === ldh.__proto__)
    // 注意点
    // 如果我们修改了原来的原型,给原型对象赋值的是一个对象,则必须利用constructor指回原来的钩爪函数
    Star.prototype = {
        // 手动指回原来的构造函数
        constructor:Star,
        sing:function(){
            console.log("2会唱歌")
        },
        move:function(){
            console.log("会表演")
        }
    }
    var zs=new Star('张三',33)//缺少constructor 需要手动指回
    console.log(zs)

    // 构造函数原型prototype也是一个对象,指向的是一个Object原型对象。
    console.log(Star.prototype.__proto__) // Object
    // 而Object原型对象的对象原型--proto--指向 null 空。
    console.log(Star.prototype.__proto__.__proto__) //null

</script>

?

?

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-03-16 22:12:46  更:2022-03-16 22:18:43 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 6:58:14-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码