1为什么要有原型：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //创建一个人类的构造函数 function Person(name , age){ //通过this，向新对象中添加属性 this.name = name; this.age = age; //向新的对象中添加一个sayName()方法 this.sayName = fun; } /* * 在构造函数中我们为每一个对象都添加了一个sayName()方法， * 而这个方法是在构造函数中创建的，构造函数每执行一次就要创建一个新的sayName()方法 * 每个对象中的sayName()方法都是不同，有几个对象就有几个sayName() * 但是这些函数的功能又是一摸一样的，所以我们没有必要创造出这么多一摸一样的函数 */ /* * 将函数定义到全局作用域中 ，的确可以解决问题，但是将它定义到全局作用域将会导致全局作用域的命名空间被污染。 * 同样也导致我们程序运行不安全 */ //将函数定义到构造函数的外部 function fun(){ console.log(this.name); }; //创建一个Person var per = new Person("孙悟空",18); var per2 = new Person("唐僧",16); var per3 = new Person("玉兔精",16); //console.log(per.sayName == per2.sayName); per3.sayName(); </script> </head> <body> </body> </html> 2.什么是原型： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 原型（prototype） * - 我们每次创建一个函数浏览器都会为函数添加一个属性 * 叫做prototype，这个属性对应的是一个对象 * 这个对象就是我们说的原型对象。 * - 如果以仅仅以函数的形式去调用函数，则原型对象没有任何作用 * - 当以构造函数的形式调用函数时，它所创建的对象中都会有一个隐含的属性 * 执行该函数的原型对象，我们可以通过__proto__来访问这个对象 * * - 所有的同一类型的对象他们都共享同一个原型对象，这个原型对象就相当于一个公共的区域 * - 当我们去调用一个对象的属性或方法时，它会先去对象自身中寻找, * 如果找到了则直接使用，如果没找到则去原型对象中寻找，如果原型中有则返回原型中的值 * 如果原型中没有，则去原型的原型中寻找，找到了则直接使用依次类推。。。 * 注意：Object的原型的原型为null，所以会一直找Object的原型， * 如果他里面依然没有，则返回undefined * - 我们可以将对象中共有的属性或方法统一添加到原型中， * 这样我们不用添加多个重复的属性或方法，也不会污染全局作用域 */ function MyClass(){ } //向函数的原型对象中添加一个属性 MyClass.prototype.hello = "你好"; MyClass.prototype.fun = function(){ alert("我是原型中的fun"); }; //创建MyClass的实例 var mc = new MyClass(); var mc2 = new MyClass(); var mc3 = new MyClass(); mc.hello = "mc的你好"; //console.log(mc3.__proto__ == MyClass.prototype) //console.log(mc2.hello); //mc2.fun(); //创建一个人类的构造函数 function Person(name , age){ //通过this，向新对象中添加属性 this.name = name; this.age = age; } //向Person的原型中添加sayName() Person.prototype.sayName = function(){ console.log(this.name); }; var per = new Person("孙悟空",18); var per2 = new Person("唐僧",16); var per3 = new Person("玉兔精",16); per3.sayName(); </script> </head> <body> </body> </html>3.怎么使用原型： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //创建一个人类的构造函数 function Person(name , age){ //通过this，向新对象中添加属性 this.name = name; this.age = age; } //向Person的原型中添加sayName() Person.prototype.sayName = function(){ console.log(this.name); }; //创建一个Person的实例 var per = new Person("孙悟空",18); //当我们打印一个对象时，控制台往往会输出 [object Object] //此时实际上输出的内容是对象的toString()方法的返回值 var str = per.toString(); //console.log(str); //检查per中是否有toString //如果属性在对象的原型中，使用in也会返回true //console.log("toString" in per); //console.log(per.hasOwnProperty("toString")) ; //console.log(per.__proto__.__proto__.hasOwnProperty("toString")); //console.log(Object.prototype.__proto__); //修改per的toString() /*per.toString = function(){ //return "我是一个可爱的Person" ; return "Person[name = "+this.name+" ，age = "+this.age+"]"; };*/ //修改Person原型的toString Person.prototype.toString = function(){ //return "我是一个可爱的Person" ; return "Person[name = "+this.name+" ，age = "+this.age+"]"; }; var per2 = new Person("白骨精",16); console.log(per); </script> </head> <body> </body> </html>
