js的原型链的简单了解-1对象如何生成_js原型怎么生成的-CSDN博客

本文链接：https://blog.csdn.net/qq_45723057/article/details/103741147

我们大家所学的js是基于原型的，我们在原型上编程可以优化代码，提高浏览器的运行速度，下面我就和大家简单了解一下什么是对象，什么是原型.

1.对象如何而来

对象是由函数new出来的，那么他的原理是什么呢？首先，我们必须要先了解函数的作用域和预编译，如果上面没学会，那么下面的内容对你而可能会有一点难度。
下面开始正是内容：
函数，只要是函数，那么他在定义的时候就会形参作用域，当他执行的时候，就会形成预编译。在他(函数)的AO对象中有一个this，值为undefined，当他在window下执行时，值会变成window。那么构造函数和普通函数的区别在哪里呢？就在于在函数执行时，前面加了一个new，如果没有这个new，那么这个函数就是一个普通函数了！所以构造函数和普通函数的区别就是这个new了，当我们new一个函数时候，让我们来看看到底发生了上面。

现在下面的函数就是一个普通函数，当我们执行他一下，看一看结果是什么
        function Fn() {
            var a = 10;
            this.b = 20;
            this.eat = function () {
                console.log(++a);
            }
        }
        Fn();// 上面都没有输出，但是这是真的吗？真的上面都没有改变吗？

现在然我带你深入走进这个函数的执行过程：
首先，在函数定义的时候，他就生成了一个作用域，叫做[[scope]]，在他里面存着GO对象。
然后函数执行，Fn就生成了属于他自己的AO对象，让我们看看这个AO对象里面发生了。
首先这个AO对象中不是空的，但是我们可以把他当作空的来理解，因为那么多出来的东西都是系统给每个函数附带的，这个我们暂时先不说明，我会在下面的讲解中再做出解释。
在这里插入图片描述

首先函数的执行，再函数执行的前一刻发生预编译，形成AO对象

。

AO对象中生成this，值为undefined，
因为由一个var a ，所有在AO对象中生成了一个a，值为undefined，

然后函数执行

函数发现它是由window调用的，这是AO对象中的this就会发生改变，值变成window。
随后逐一执行代码，a 赋值为 10
this.b = 20 ,
this.eat = function () {
console.log(++a);
}

随后函数会去找这个this是谁，再给这个this挂上b属性和eat属性并且赋值，这时根据上方的第一步，你会发现这个this就是window！
最后函数默认 return undefined；函数执行结束！
这才是这个函数的做的所有事情，假如此时我们我们再下面在输出俩句代码，你会发现，嘿嘿~~ 我们的猜想真的，是正确的呢！

        function Fn() {
            var a = 10;
            this.b = 20;
            this.eat = function () {
                console.log(++a);
            }
        }
        Fn()
        console.log(b); // 20
        console.log(eat); // function () {console.log(++a)}

我想这样的讲解，大家都应该可以听懂了吧，下面才是我们的重点构造函数！
构造函数也是函数，那么他在定义和执行的时候，当然也会由作用域和预编啦！那么他们的区别就是函数前面的那个new了，请看下面代码：

        function Fn() {
            var a = 10;
            this.b = 20;
            this.eat = function () {
                console.log(++a);
            }
        }
        var f = new Fn();
        此时有了这个new，会产生什么呢？我来给大家讲解一下。

首先，在函数定义的时候，他就生成了一个作用域，叫做[[scope]]，在他里面存着GO对象。
然后函数执行，Fn就生成了属于他自己的AO对象，让我们看看这个AO对象里面发生了。
随着函数的执行，再函数执行的前一刻发生预编译，形成AO对象。

AO对象中生成this，值为undefined，
因为由一个var a ，所有在AO对象中生成了一个a，值为undefined，
(目前为止是和上方是一模一样的，下面就是new的作用了)

然后函数执行，

函数发现它是由window调用的，这是AO对象中的this就会发生改变，值变成window。
紧接着他会发现函数前面有一个new，此时系统会构造出一个空对象{}（看上去是空的，实际上是有着一些系统默认方法的）
然后此时这个new，会改变this的指向，让他不再指向window，而是指向自己生成的这个空对象
随后逐一执行代码，a 赋值为 10
this.b = 20 ,
this.eat = function () {
console.log(++a);
}
随后函数会去找这个this是谁，再给这个this挂上b属性和eat属性并且赋值，这时根据上方的第一步，你会发现这个this是空对象！
最后函数在new的影响下 return this；函数执行结束！
因为我们用 f 接收了 new Fn()的返回值，所以我们的 f 就变了一个对象！