作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.原型(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>.浏览器打开以上代码渲染结果
