js的原型链的简单了解-1对象如何生成

我们大家所学的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对象

  1. AO对象中生成this,值为undefined,
  2. 因为由一个var a ,所有在AO对象中生成了一个a,值为undefined,
然后函数执行
  1. 函数发现它是由window调用的,这是AO对象中的this就会发生改变,值变成window。
  2. 随后逐一执行代码,a 赋值 为 10
  3. this.b = 20 ,
  4. 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对象。

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

然后函数执行,

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

此时,我们就抓住了这个this,this存在与Fn函数的AO对象中,所以Fn函数AO对象不会像其他函数一样,执行完就会消散,会一直存在,就如同闭包一般! 这就是我所理解的对象的由来,如有不对请大家积极指出!!!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值