4.原型和原型链.html 3.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  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. // function fn() {
  12. // console.log(this)
  13. // return '哈哈'
  14. // }
  15. // console.log(fn(),'fn')
  16. // 匿名函数
  17. // let xxx = function() {}
  18. // // 立即执行函数
  19. // (function(){})()
  20. // let obj = {
  21. // name:"图图",
  22. // age:3,
  23. // address:function() {
  24. // }
  25. // }
  26. /**
  27. * 构造函数
  28. * 1.首字母大写
  29. * 2.new进行实例化调用
  30. * 3.this指向当前实例
  31. * 4.构造函数 不用return反值
  32. * 属性写在构造函数中
  33. * 方法写在原型中
  34. * */
  35. function Person() {
  36. this.name = "图图";
  37. this.age = 3;
  38. }
  39. // 原型
  40. Person.prototype.address = function () {
  41. console.log("翻斗花园")
  42. }
  43. /**
  44. * 原型:
  45. * 1.所有的构造函数中都自带了一个prototype属性(显性),该属性指向的是当前构造函数的原型
  46. * 2.所有的构造函数中自带了一个constructor属性(构造器),该属性指向的是当前原型的构造函数
  47. * 3.构造函数可以通过new去进行实例化 产生该构造函数的实例化对象
  48. * 4.实例化对象可以通过_proto_(隐性)方法访问该构造函数原型中的属性和方法
  49. *
  50. */
  51. let p1 = new Person();
  52. console.log(p1, 'p1')
  53. p1.address();
  54. // var person = new Person();
  55. // console.log(person.__proto__ == Person.prototype)
  56. // console.log(Person.prototype.constructor == Person)
  57. // console.log(Object.getPrototypeOf(person) === Person.prototype)
  58. /**
  59. * 原型链
  60. * 访问对象属性 先从对象本身找
  61. * 通过_proto_去原型上找
  62. * 若还没有找到 则在原型对象的原型上查找 找到则返回 未找到反undefined
  63. */
  64. /* 面试题
  65. * 所有的函数数据类型都天生自带一个prototype属性,该属性的属性值是一个对象,指向原型
  66. * prototype的属性值中天生自带一个constructor属性,其constructor属性值指向当前原型所属的构造函数/类
  67. * 所有的对象数据类型(实例),都天生自带一个_proto_属性,该属性的属性值指向当前实例所属类的原型
  68. * 总结
  69. * 把所有的对象共用的属性全部放在堆内存的一个对象(共用属性组成的对象)
  70. * ,然后让每一个对象的 __proto__存储这个「共用属性组成的对象」的地址。
  71. * 而这个共用属性就是原型,原型出现的目的就是为了减少不必要的内存消耗。
  72. * 而原型链就是对象通过__proto__向当前实例所属类的原型上查找属性或方法的机制
  73. * ,如果未找到,则去Object的原型上找,还是没有找到想要的属性或者是方法则查找结束,
  74. * 最终会返回undefined
  75. * /
  76. </script>
  77. </body>
  78. </html>