01.原型.html 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <script>
  9. /*
  10. 原型prototype
  11. 我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype
  12. 每个函数的prototype都是不一样的
  13. 这个属性对应着一个对象,这个对象就是我们所谓的原型对象
  14. 如果函数作为普通函数调用,prototype没有任何作用
  15. 当函数以构造函数调用时,它所创建的对象中都会有一个隐含的属性,
  16. 指向该构造函数的原型对象,我们可以通过__proto__来访问该属性(注意前后都是两个下划线)
  17. 原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象
  18. 我们可以将对象中共有的内容,统一设置到原型对象中
  19. 当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,如果有则直接使用
  20. 如果没有则会去原型对象中寻找,如果找到则直接使用
  21. 以后我们创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中,
  22. 这样不用分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法了
  23. */
  24. function Person(){
  25. }
  26. function MyClass() {
  27. }
  28. // console.log(Person.prototype);
  29. // console.log(Person.prototype == MyClass.prototype);//false
  30. //向MyClass的原型中添加属性a
  31. // MyClass.prototype.a = 123;
  32. // //向MyClass的原型中添加一个方法
  33. // MyClass.prototype.sayHello = function(){
  34. // alert("hello");
  35. // }
  36. // var mc = new MyClass();
  37. // var mc2 = new MyClass();
  38. // console.log(mc.__proto__);
  39. // console.log(mc2.__proto__ == MyClass.prototype);
  40. // //向mc中添加a属性
  41. // mc.a="mc中的a";
  42. // console.log(mc.a);
  43. // console.log(mc2.a);
  44. // mc.sayHello();
  45. /*
  46. 函数修改的补充
  47. */
  48. function Person(name,age,gender){
  49. this.name = name;
  50. this.age = age;
  51. this.gender = gender;
  52. }
  53. //向原型中添加sayName方法
  54. Person.prototype.sayName = function(){
  55. console.log('hello,大家好,我是'+this.name);
  56. }
  57. //创建一个Person的实例
  58. var per = new Person("孙悟空",28,"男");
  59. var per2 = new Person("猪八戒",38,"男");
  60. per.sayName();
  61. per2.sayName();
  62. console.log(per.sayName == per2.sayName);
  63. </script>
  64. </head>
  65. <body>
  66. </body>
  67. </html>