20.原型原型链.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <script>
  10. function fn1() {
  11. console.log('fn1',this);
  12. }
  13. fn1();
  14. /**
  15. * 构造函数
  16. * 调用时 使用关键字 new
  17. * 方法名字首字母大写
  18. * this指向发生改变
  19. */
  20. /**
  21. * 方法 写在原型下
  22. * 属性 写在构造函数下
  23. */
  24. function Person(name,age) {
  25. // this指向当前实例化的对象
  26. // console.log(name);
  27. // console.log(age);
  28. this.name = name;
  29. this.age = age;
  30. console.log(this,'person');
  31. // function
  32. // prototype 原型
  33. // constructor
  34. Person.prototype.eat = function() {
  35. console.log("爱吃桃子");
  36. }
  37. }
  38. // new 实例化对象
  39. var per = new Person("孙悟空",20);
  40. console.log(per.name)
  41. console.log(per.age)
  42. per.eat();
  43. console.log(per,'111')
  44. // console.log(per._photo_,'原型链')
  45. function Animal() {
  46. console.log(this,'动物')
  47. }
  48. new Animal();
  49. /**
  50. * 构造函数中自带了两个值
  51. * prototype 原型
  52. * constructor 构造函数指向对象 构造器
  53. */
  54. /**
  55. * 原型链
  56. * 访问对象时 现在对象本身寻找
  57. * 通过_photo_去构造函数的原型上寻找
  58. * 若还未找到 则去prototype上找 找到则返回 未找到则返null
  59. */
  60. </script>
  61. </body>
  62. </html>