ES6中class的执行顺序问题和一些个人理解

最新推荐文章于 2023-07-17 09:12:04 发布

我是真的垃圾啊

最新推荐文章于 2023-07-17 09:12:04 发布

阅读量984

点赞数 1

分类专栏： JS 前端学习文章标签： javascript 原型模式前端

本文链接：https://blog.csdn.net/fujiaxu666/article/details/121752730

版权

前端学习同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

18 篇文章 0 订阅

订阅专栏

执行顺序

众所周知，ES6的class只不过是ES5定义对象的语法糖，今天学习的时候突然想到它的执行顺序是什么？

我们知道的class在ES6中就是一个函数，且只能通过new才能执行，执行的时候会自动调用里面的构造函数，

那么对于里面的方法它们是什么时候被放入class xx 的prototype中的呢？

下面用到代码验证一下：

<!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>
        class obj{
            constructor(){
                this.x = 1;
            }
            s(){
                console.log("你好啊");
            }
        }
        console.log(obj.prototype);
        let y = new obj();
        console.log(y.__proto__);
    </script>
</body>
</html>

我们定义一个class obj，下面是第一个输出的内容也就是obj.prototype

在这里插入图片描述

明显可以看出来，在没有使用new之前，我们打印出的结果已经有在class中定义的函数了，这就意味着当class一旦被定义完成，那么里面的函数就已经呗挂载到了prototype中。

那如果我们实例化对象呢

在这里插入图片描述

这个也是指向的class的prototype。

个人理解

下面是我对ES6中理解class其实还是可以看做是对构造函数的映射，当我们new class 时，就调用里面的构造函数，如下图的关系：
在这里插入图片描述

当我们定义完class 函数，那么里面的函数就会被自动到prototype中的，当new class时，只会执行里面的constructor函数，来完对象的实例化，所以下述代码也是等效的效果。

 class obj{
            y = 3;
            constructor(){
                this.x = 1;
            }
            
        }
        obj.prototype.s = function(){
                console.log("你好啊");
        }
        
        console.log(obj.prototype);

对象的的属性在class中还可以使用不放在构造函数中，而直接放在class的顶层就可以完成定义

class obj{
            y = 3;
            constructor(){
                this.x = 1;
            }
            x = 4
        }
        obj.prototype.s = function(){
                console.log("你好啊");
        }
        
        console.log(obj.prototype);

可以看到在prototype中并没有x 和 y
在这里插入图片描述

这是否意味着它会把它放在实例对象中？

console.log(new obj());

在这里插入图片描述

果然如此，真实令人惊奇。下面下面这样定义则是无效的:

class obj{
            constructor(){
                
            }
            
        }
        obj.prototype.s = function(){
                console.log("你好啊");
        }
        obj.x = 2;
        console.dir(obj);

这样并不会在实例化的对象中出现x。我想是因为在class中定位属性，那么它会自动将其放入consructor中，并为其加this。

     obj.x = 2;
        console.dir(obj);

这样并不会在实例化的对象中出现x。我想是因为在class中定位属性，那么它会自动将其放入consructor中，并为其加this。

以上就是今天在使用ES6中突发的感想，有什么错误，请指正。

我是真的垃圾啊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6中class的执行顺序问题和一些个人理解

执行顺序众所周知，ES6的class只不过是ES5定义对象的语法糖，今天学习的时候突然想到它的执行顺序是什么？我们知道的class在ES6中就是一个函数，且只能通过new才能执行，执行的时候会自动调用里面的构造函数，那么对于里面的方法它们是什么时候被放入class xx 的prototype中的呢？下面用到代码验证一下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫

专栏目录