上一篇文章粗略的理解了一下什么是原型和原型链概念。这篇文章记录一下自己对创建对象的过程的深入理解。
一、new创建对象的过程
首先我们都知道javascript创建一个对象的方式可以是使用构造函数方式。比如:
<script type="text/javascript">
function Person(name,age){
this.name=name;
this.age=age;
// return this;
}
var p1=new Person("xiaoming",18);
</script>
这是常见的使用构造函数创建一个对象。其中p1是通过传入参数的方式创建一个新的实例。那么它的背后的原理是通过new关键字进行创建的。我们从var p1=new Person("xiaoming",18);
这段代码开始。首先我们是定义一个变量p1保存属性值,当通过new这个关键字的时候,会回到Person()这个构造函数中,this代表的是创建空对象,当我传入的参数成功,那么默认会执行return this;
这个语句,其意思就是返回一个对象,返回之后再赋值给变量p1。
总的来说就是这样:
new Person() —– this变成空对象 —–return this返回结果 —-赋值p1
这就是构造函数创建实例的过程。
二、常见的构造函数的写法
var a={} // 相当于var a = new Object()
var array=[] // 相当于var array = new Array()
var function(){} //相当于var function = new Function(){}
所以function其实就是一个对象。如何判断某一个变量属于哪个构造函数,可使用 instanceof
关键字,代码如下:
<script type="text/javascript">
var a={}
var b={}
function Func(){}
</script>
运行结果如下:
三、原型规则
所有引用类型(数组、对象、函数),都具有对象特性
所有引用类型(数组、对象、函数),都有一个__proto__
指针,即隐式原型
所有的函数,都有一个prototype属性,属性值也是一个普通的对象,即显示原型
所有的引用类型(数组、对象、函数),__proto__
指向它的构造函数的prototype
属性值
当某一个对象没有其属性值时,会通过__proto__
属性向上查找。
```
<script type="text/javascript">
var a={}
var b={}
function Func(){}
</script>
从上述的代码可知,a instanceof Object
等于true,说明Object是对象a的原型。那么Object也是一个构造函数,函数都有一个prototype属性,按照上述的原型规则。
a.__proto__ === Object.prototype //true
针对于第四个规则,贴上代码:
function Foo(name){
this.name=name;
}
Foo.prototype.FooName=function(){
console.log('I am Foo!! ');
}
var f = new Foo('zhangsan');
f.HooName= function(){
console.log('I am Hoo!!')
}
当f这个对象找不到其方法时,会通过__proto__
属性去向上查找(也就是根据原型构造函数的prototype属性去查找)。运行效果:
此时为了验证结果的正确性,也就是验证FooName并不是对象f的属性,我们可以使用hasOwnProperty
这个方法,我们在后面添加一段代码。
var item;
for (item in f){
if(f.hasOwnProperty(item)){
console.log(item);
}
}
运行结果如图:
这就是原型链,如果上面没有就继续往上找。