构造函数 01

复制代码
  1 <!--
  2  * @Author: your TM_cc
  3  * @Date: 2021-10-27 15:50:42
  4  * @LastEditTime: 2021-10-27 20:57:38
  5  * @LastEditors: Please set LastEditors
  6  * @Description: In User Settings Edit
  7  * @FilePath: \构造函数.html
  8 -->
  9 <!DOCTYPE html>
 10 <html lang="en">
 11 <head>
 12     <meta charset="UTF-8">
 13     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 14     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 15     <title>构造函数</title>
 16 </head>
 17 <body>
 18     <script>
 19         /**
 20          *  构造函数的执行流程
 21          *   - 理科创建一个新的对象
 22          *   - 将新建的对象设置为函数中的this,
 23          *   - 逐行执行函数中的代码
 24          *   - 将新建的对象作为返回值返回
 25         */
 26 
 27         function Person(name,age,gender){
 28             this.name = name,
 29             this.age = age,
 30             this.gender = gender
 31             this.sayName = function(){
 32                 alert(this.name)
 33             }
 34         }
 35 
 36         var per = new Person('孙悟空',18,'男');
 37 
 38         console.log(per);
 39 
 40 
 41         /**
 42          *  创建一个人Person构造函数
 43          *   - 在Person构造函数中，为每一个对象的欧添加了一个sayName方法
 44          *      当前的方法是在构造函数内部创建的，也就是 构造函数每执行一次就会
 45          *          创建一个新的sayName方法，也就是所有实例的sayName都是唯一的
 46          *      这样就会导致若执行了10000次就会创建10000次新的方法，而这10000次方法都是一模一样的
 47          *          这是完全没有必要的，可以使所有新的对象都共享同一个方法
 48          *          可以将方法定义在外部解决
 49         */
 50 
 51         function Person2(name,age,gender){
 52             this.name = name,
 53             this.age = age,
 54             this.gender = gender
 55             this.sayName = fun()
 56         }
 57 
 58         /**
 59          *  将sayName方法定义在全局作用域
 60          *
 61          *      - 将函数定义在全局作用域，污染了全局作用域的命名空间，容易被同名方法覆盖
 62          *
 63          *     function fun(){
 64          *          alert()
 65          *      }
 66          *      
 67         */
 68        
 69 
 70 
 71         /**
 72          * 解决：原型prototype
 73          *
 74          * 我们所创建的每一个函数，解析器都会想函数中添加一个prototype属性
 75          *      这个属性对应着一个对象，这个对象就是我们所谓的原型对象
 76          * 如果函数作为普通函数调用，prototype没有任何作用
 77          * 当函数以构造函数的形式调用时，它所创建的对象都会有一个隐含的属性
 78          *      指向构造函数的原型对象,我们可以通过 __proto__ 来访问该属性
 79          *
 80          * 原型对象就相当于一个公共区域，所有同一个类创建的实例都可以访问到这个原型对象；
 81          *      我们可以将对象中共有的内容，统一设置到原型对象中
 82          *
 83          * 当访问对象的一个属性时，会现在对象中寻找，再到原型对象中找
 84         */
 85 
 86             function MyClass(){
 87 
 88             }
 89 
 90             var pro = new MyClass();
 91 
 92             var pro2 = new MyClass();
 93 
 94             //console.log(MyClass.prototype);
 95             console.log(pro.__proto__ == MyClass.prototype) // true
 96             console.log(pro.__proto__ == pro2.__proto__) //true
 97 
 98 
 99             // 修改
100             // 向原型对象中添加sayName方法
101 
102             function Person3(name,age,gender){
103                 this.name = name,
104                 this.age = age,
105                 this.gender = gender
106         }
107 
108         var pro3 = new Person3('沙和尚',22,'男')
109 
110         Person3.prototype.sayName = function () {
111             alert('我是'+this.name)
112         }
113 
114         pro3.sayName(); // 我是沙和尚
115     </script>
116 </body>
117 </html>
复制代码

 

posted @   TM_cc  阅读(20)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示