27.原型和原型链.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  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. // // 函数
  11. // // 1.匿名函数
  12. // let aa = function () {
  13. // }
  14. // aa()
  15. // // 2.普通函数
  16. // function aa() {
  17. // }
  18. // // 3.立即执行函数
  19. // (function () {
  20. // })()
  21. // // 4.构造函数
  22. // function Person() {
  23. // }
  24. /** 构造函数
  25. * 1.首字母要大写
  26. * 2.可以通过new进行调用
  27. * 3.在构造函数中 this指向当前实例
  28. * 4.在构造函数中 return无效
  29. */
  30. /**
  31. * 构造函数中 属性
  32. * 原型 方法
  33. */
  34. function Person(name, age) {
  35. console.log("你好,人员信息")
  36. console.log(this)
  37. this.name = name;
  38. this.age = age;
  39. }
  40. Person.prototype.say = function () {
  41. console.log("你好")
  42. }
  43. let person = new Person('图图', 3)
  44. console.log(person);
  45. person.say();
  46. console.log(person.__proto__ == Person.prototype);
  47. console.log(Person.prototype.constructor == Person);
  48. console.log(Object.getPrototypeOf(person) === Person.prototype);
  49. /**
  50. * 原型
  51. * 1.所有的构造函数都自带了一个prototype属性(显性),该属性指向当前构造函数的原型
  52. * 2.原型可以通过自带的constructor(隐性),指向当前原型的构造函数
  53. * 3.构造函数可以通过new进行实例化 产生实例化对象
  54. * 4.实例化对象可以通过_proto_属性 指向当前构造函数的原型 在上面查找想要的属性或方法
  55. */
  56. /**
  57. * 原型链
  58. * 当访问一个对象的属性或方法时,先在当前对象自身查找,如果没有,
  59. * 通过_proto_方法去当前对象的原型上查找,如果,还是没有,去对象(Object.prototype)的原型上查找,
  60. * 找不到返回undefined,原型链的终点是null。这条由_proto_串起的链就是原型链;
  61. */
  62. </script>
  63. </body>
  64. </html>