JavaScript基础知识-原型(prototype)
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.原型(prototype)对象初体验
1>.JavaScript源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原型对象</title> <script type="text/javascript"> /** * 原型(prototype)对象: * (1)我们所创建的每一个函数，解析器都会向函数中添加一个prototype属性，该属性对应着一个对象，我们称之为"原型"对象。 * (2)原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象； * (3)综上所述，以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中。 * * 访问对象属性的查找顺序: * (1)当我们访问对象的一个属性或方法时，它会现在对象中自身中寻找，如果有则直接使用; * (2)如果上一步未找到的，就会去原型对象中寻找，如果找到则直接使用; * * 温馨提示: * (1)如果函数作为普通函数调用prototype属性没有任何作用; * (2)如果函数作为构造函数的形式调用时(即使用"new"关键字)，它所创建的对象中都会有一个隐含的属性指向该构造函数的原型; * (3)一个构造函数(即"类")对象的实例对象可以通过"__proto__"来访问其原型(prototype)属性。 */ function Person(name,age,address) { this.name = name; this.age = age; this.address = address; } // 向Person类的原型中动态注入sayHello方法，让所有Person类的所有实例共享原型属性。 Person.prototype.sayHello = function(){ console.log("I'm %s, and have %d years old. By the way, I live in %s",this.name,this.age,this.address); } // 向Person类的原型中动态注入arms属性 Person.prototype.arms = "冲锋枪";
// 注意构造函数的调用方式需要加一个new关键字哟~ var p1 = new Person("孙悟空",500,"花果山"); var p2 = new Person("蜘蛛精",300,"盘丝洞"); var p3 = new Person("如来佛祖",1000,"大雷音寺"); // 注意访问对象属性的查找顺序哟~先查找对象属性本身，而后再去查找原型对象中的属性。 console.log(p1.arms); console.log(p2.arms); console.log(p3.arms); // 向p1对象中动态注入arms属性 p1.arms = "如意金箍棒"; console.log(p1.arms); console.log(p2.arms); console.log(p3.arms); p1.sayHello(); p2.sayHello(); p2.sayHello(); console.log(Person.prototype) console.log(p1.__proto__) console.log(p1.__proto__ == Person.prototype) </script> </head> <body> </body> </html>
2>.浏览器打开以上代码渲染结果
二.检查非原型(prototype)对象中的属性
1>.JavaScript源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>访问原型对象中的属性</title> <script type="text/javascript"> function Person(name,age,address) { this.name = name; this.age = age; this.address = address; } Person.prototype.sayHello = function(){ console.log("I'm %s, and have %d years old. By the way, I live in %s",this.name,this.age,this.address); } Person.prototype.arms = "冲锋枪"; var p1 = new Person("孙悟空",500,"花果山"); /** * 使用"in"关键字检查对象中是否含有某个对象属性时，如果对象中没有单原型中有，也会返回true。 */ console.log("name" in p1) console.log("arms" in p1) console.log("sayHello" in p1) /** * 对象的属性访问属性如下所示: * (1)原型对象也是对象，所以他也有原型，当我们使用一个对象的属性或方法时，会先在自身中寻找，自身中如果有就直接使用; * (2)如果上一步中未找到属性或方法时，则再去原型对象中寻找，如果原型对象中有则使用; * (3)如果上一步中未找到属性或方法时，就再去原型中的原型去寻找属性或方法，直到找到Object对象的原型; * (4)Object对象的原型的原型并不存在(默认值为null)，如果在Object原型中依然没有找到属性或方法，则返回"undefined"; * 综上所述，方法和属性的查找顺序如下图所示。 * */ console.log(p1.sayHello) console.log(p1.Hello) /** * 可以使用对象的hasOwnProperty方法来检查对象自身中是否含有某个属性，如果有相应的属性或方法才会返回true。 */ console.log(p1.hasOwnProperty("name")) console.log(p1.hasOwnProperty("arms")) // 该属性属于原型对象，而非对象本身的属性哟~ console.log(p1.hasOwnProperty("sayHello")) /** * Object对象是所有对象的祖先，因此object对象的原型并不存在，如果你非要查看，则object的原型为null。 */ console.log(p1.__proto__) // p1对象的原型 console.log(p1.__proto__.__proto__) // p1对象的原型的原型是object对象哟~ console.log(p1.__proto__.__proto__.__proto__) // object的原型为null console.log(typeof p1.__proto__.__proto__.__proto__) console.log(p1.hasOwnProperty("hasOwnProperty")) console.log(p1.__proto__.hasOwnProperty("hasOwnProperty")) console.log(p1.__proto__.__proto__.hasOwnProperty("hasOwnProperty")) </script> </head> <body> </body> </html>
2>.浏览器打开以上代码渲染结果
