03.原型链_属性问题.html 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  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>03.原型链_属性问题</title>
  8. </head>
  9. <body>
  10. <!--
  11. 1、读取对象的属性值时:会自动到原型链中查找
  12. 2、设置对象的属性值时:不会查找原型链,如果当前对象中没有此属性,
  13. 直接添加此属性并设置其值
  14. 3、方法一般定义在原型中,属性一般通过构造函数定义在对象本身上
  15. -->
  16. <script>
  17. function Fn() {
  18. }
  19. Fn.prototype.a = 'xxx'
  20. var fn1 = new Fn()
  21. console.log(fn1.a) //xxx
  22. console.log(fn1)
  23. var fn2 = new Fn()
  24. fn2.a = 'yyy'
  25. console.log(fn1.a) //xxx
  26. console.log(fn2.a) //yyy
  27. console.log(fn2)
  28. function Person(name,age){
  29. this.name = name
  30. this.age = age
  31. }
  32. Person.prototype.setName = function(name){
  33. this.name = name
  34. }
  35. var p1 = new Person('孙悟空',22)
  36. p1.setName('二师兄')
  37. console.log(p1)
  38. console.log(p1.name) //二师兄
  39. console.log(p1.age) //22
  40. var p2 = new Person('白骨精',22)
  41. p2.setName('唐僧')
  42. console.log(p2)
  43. console.log(p1.__proto__===p2.__proto__) //true
  44. </script>
  45. </body>
  46. </html>