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