这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要和大家一起深入理解 JS 原型与原型链,原型是 JavaScript 中一个比较难理解的概念,本文为大家解决这个难题,感兴趣的小伙伴们可以参考一下
要了解原型和原型链,首先要理解普通对象和函数对象。
一、普通对象和函数对象的区别
在 Javascript 的世界里,全都是对象,而对象之间也是存在区别,我们首先区分一下普通对象和函数对象,如下代码:
- function f1(){};
- var f2 = function(){};
- var f3 = new function(){};
- var o1 = {};
- var o2 = new Object();
- var o3 = new f1();
- console.log(typeof Object); //function
- console.log(typeof Function);//function
- console.log(typeof f1) //function
- console.log(typeof f2) // function
- console.log(typeof f3) //function
- console.log(typeof o1) //object
- console.log(typeof o2) //object
- console.log(typeof o3)// object
在上面的代码中可以看出,f1、f2 和 f3 都是函数对象,而 o1,o2 和 o3 都是 object 对象,也就是普通对象,函数对象本质就是由 new function()构造而来,其他的都是普通对象;函数对象和普通对象理解之后,后文会说明两者的区别。
二、原型
在 JavaScript 中,原型也是一个对象,原型的作用,则是实现对象的继承。
在 js 的所有函数对象中,都存在一个属性 prototype,该属性对应当前对象的原型。
而所有的 JavaScript 对象,都存在一个_proto_属性(由于_proto_是个非标准属性,因此只有 ff 和 chrome 两个浏览器支持,标准方法是 Object.getPrototypeOf()),_proto_属性指向实例对象的构造函数的原型,理解起来就如下:
- var p = new Person();
- console.log(p._proto === Person.prototype) //true
从上面代码可以看出,p 是实例对象,Person 是 p 的构造函数,可以看出来 p 的_proto_属性指向构造函数 Person 的原型。
下面用代码来解释一下 js 是如何通过原型进行继承的:
- var parent = function(name){
- this.name = name;
- }
- parent.prototype.getName = function(){
- return this.name;
- }
- var son = new parent("huahua");
- console.log(son.getName());//'huahua'
显然,son 继承了 parent 的原型中的函数属性 getName。
三、原型链
除开 Object 的 prototype 的原型是 null 以外,所有的对象和原型都有自己的原型,对象的原型指向原型对象。
在层级多的关系中,多个原型层层相连则构成了原型链。
在查找一个对象的属性时,倘若在当前对象找不到该属性,则会沿着原型链一直往上查找,知道找到为止,如果到了原型链顶端,还没找到,则返回 undefined。
四、constructor
constructor 是构造函数创建的实例的属性,该属性的作用是指向创建当前对象的构造函数。
例如,son.constructor == parent;//true
来源: http://www.phperz.com/article/17/0706/327646.html