javaScript中构造函数以及函数--原型链理解，每个函数对象都有一个prototype / proto，new之后的实例对象都有proto

未来可期wlkq

已于 2024-06-20 15:48:45 修改

阅读量103

点赞数

分类专栏： vue jsvascript 文章标签： javascript 原型模式前端

于 2023-03-16 23:07:11 首次发布

本文链接：https://blog.csdn.net/qq_43631129/article/details/129603265

版权

vue 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

jsvascript

3 篇文章 0 订阅

订阅专栏

如何查看函数的原型链，以及构造函数的原型链

每个函数对象都有一个prototype / proto

function person(){} person.prorotype / person.proto
function fn(){} fn.prorotype / fn.proto
Function Function.prorotype / Function.proto

new之后的实例对象都有proto，没有prototype = undefined

const person = new person() person.proto
const fn1 = new fn() fn1.proto

  // 请看下面这个例子：
        function foo() { 
            const this = { __proto__ : foo.prototype }
            this.baz = "baz"; 
            console.log(this.bar + " " + baz); 
        } 
        var bar = "bar"; 
        var baz = new foo(); 

        // 如果把new这个关键字放在一个函数调用的前面，JS编译器会做这四件事情：

        // 创建一个新的空的对象
        // 把这个对象链接到原型对象上
        // 这个对象被绑定为this
        // 如果这个函数不返回任何东西，那么就会默认return this
        // 关于new这个关键字的四步，看不懂也没事，有空的话会另写一篇文章具体介绍一下。不过，我们从这四步可以看出，如果在函数调用前面加上new，那么这个函数中的this就是这个新的对象。

// 1、 解读普通函数fn: function()
function fn() {}
console.log('%c%s', 'color:#cb3a56', 'Log: fn.__proto__--行', fn.__proto__) // 每个函数对象都有__proto__，指向函数原型 Function.prototype
console.log('%c%s', 'color:#cb3a56', 'Log: fn.prototype--行', fn.prototype) // 每个函数对象都有prototype，指向原型的 fn.prototype，
console.log('%c%s', 'color:#cb3a56', 'Log: fn.prototype.constructor--行', fn.prototype.constructor) // 指向函数本身 fn
console.log('%c%s', 'color:#cb3a56', 'Log: fn.prototype.constructor--行', fn.prototype.__proto__) // 指向Object的原型对象

// 2、解读Function 自身
console.log('%c%s', 'color:#cb3a56', 'Log: Function.__proto__--行', Function.__proto__) // 每个函数对象的__proto__都指向 Function.prototype
console.log('%c%s', 'color:#cb3a56', 'Log: Function.prototype--行', Function.prototype.constructor) // 指向函数的原型对象

// 3、试着解读Number，Array，Person，Promise

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>

  /*
    function fn() {

    }
    console.log('123', fn.__proto__ === Function.prototype)
    console.log('222', fn.prototype)

    const num = new Number(1)
    const str = '123'
    console.log('num.__proto__', num.__proto__ === Number.prototype) //实例对象的__proto__都指向该构造函数的原型对象
    console.log('str.__proto__', str.__proto__ === String.prototype)//实例对象的__proto__都指向该构造函数的原型对象
    console.log('Number.__proto__', Number.__proto__ ) // 实例自身的__proto__都指向函数 Function.prototype
    console.log('Promise.__proto__', Promise.__proto__ )// 实例自身的__proto__都指向函数 Function.prototype
    console.log('String.__proto__', String.__proto__ ) // 实例自身的__proto__都指向函数 Function.prototype

    console.log('num.__proto__.__proto__', num.__proto__.__proto__) // 指向Object了
    console.log('str.__proto__.__proto__', str.__proto__.__proto__) // 指向Object了

*/
    /*
      每个构造函数对象的__proto__ 都指向 函数的prototype Function.prototype
      console.log('Number.__proto__', Number.__proto__ )
      console.log('Promise.__proto__', Promise.__proto__ )
      console.log('String.__proto__', String.__proto__ )

      每个函数对象的实例对象的 __proto__ 都指向这个实例对象的 prototype
      const num = new Number(1)
      const str = '123'
      console.log('num.__proto__', num.__proto__ === Number.prototype)
      console.log('str.__proto__', str.__proto__ === String.prototype)

      所有对象的顶级原型都是 Object.prototype, Object.prototype.__proto__最顶级是null
      const num = new Number(1)
      const str = '123'
      console.log('num.__proto__.__proto__', num.__proto__.__proto__)
      console.log('str.__proto__.__proto__', str.__proto__.__proto__)
    */
  </script>
</body>
</html>

在这里插入图片描述
引用其他作者图片，参考地址如下：https://blog.csdn.net/hexiyuanhecy/article/details/111477400

未来可期wlkq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript中构造函数以及函数--原型链理解，每个函数对象都有一个prototype / __proto__，new之后的实例对象都有__proto__

javaScript中构造函数以及函数--原型链理解，每个函数对象都有一个prototype / __proto__，new之后的实例对象都有__proto__
复制链接

扫一扫