『Javascript基础重点』3. 了解原型对象优雅地构造函数の“JS中的Java继承” 提高运行效率，优雅地使用对象

---

欢迎关注 『Javascript基础重点』 专栏，持续更新中
欢迎关注 『Javascript基础重点』 专栏，持续更新中
介绍一些Javascript的基础重点知识，包括并不限于函数作用域与提前声明和对象的构造函数等问题。

构造函数问题代码例程

创建了一个Person类，并调用构造函数生成了对象mzh。这一步为止都很类似Java类。

构造函数有一个getName方法用于返回对象的name属性。

大家先看下面的代码，后面会讲下面代码存在的问题。

    <script type="text/javascript">
      function Person(name, age) {
        this.name = name;
        this.age = age;
        this.getName = function () {
          return this.name;
        };
      }
      mzh = new Person("mzh", "23");
      alert(mzh.getName()); //调用getName得到对象的名字属性
    </script>

---

问题1：构造函数的方法的反复创建造成资源浪费

• 存在的问题
  * 在Person构造函数中，为每一个对象都添加了一个getName方法，
  * 目前我们的方法是在构造函数内部创建的，
  * 也就是构造函数每执行一次就会创建一个新的getName方法
  * 也是所有实例的getName都是唯一的。
  * 这样就导致了构造函数执行一次就会创建一个新的方法，
  * 执行10000次就会创建10000个新的方法，而10000个方法都是一摸一样的
  * 这是完全没有必要，完全可以使所有的对象共享同一个方法
• 优化后的代码
  公共函数赋值给构造的函数的方法属性。这样Person类所有生成的对象都会共用同一个getName方法。

    <script type="text/javascript">
      function Person(name, age) {
        this.name = name;
        this.age = age;
        //向对象中添加一个方法
        this.getName = fun;
      }
      function fun() {
        return this.name;
      }
      mzh = new Person("mzh", "23");
      alert(mzh.getName()); //调用getName得到对象的名字属性
    </script>

---

问题2：污染了全局作用域的命名空间（本节的核心重点——原型对象）

• 存在的问题
  后期我们引入不同js文件时如果有多个文件都使用了同样的公共函数名称，会相互覆盖产生问题。写在后面的b文件的fun函数会覆盖掉写在前面的a文件的fun函数，导致出现各种各样的问题。

• 优化后的代码：

•   我们所创建的每一个函数（哪怕不是构造函数），解析器都会向函数中添加一个属性prototype
  

•   这个属性对应着一个对象，这个对象就是我们所谓的原型对象
  

•   如果函数作为普通函数调用prototype没有任何作用
  

    <script type="text/javascript">
      function qwer() {}
      alert(qwer.prototype); //[object Object]
    </script>

当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，
指向该构造函数的原型对象，我们可以通过__proto__来访问该属性
原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，
我们可以将对象中共有的内容，统一设置到原型对象中。
当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，
如果没有则会去原型对象中寻找，如果找到则直接使用
以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，
这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了

    <script type="text/javascript">
      function Person(name, age) {
        this.name = name;
        this.age = age;
      }
      mzh = new Person("mzh", "23"); //新建一个mzh对象
      Person.prototype.loc = "中国"; //给Person的原型对象添加一个loc属性，属性值是“中国”
      //当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，
      //指向该构造函数的原型对象，我们可以通过__proto__来访问该属性
      alert("指定找原型中的字段" + mzh.__proto__.loc); //"中国"
      alert("自动找原型中的字段" + mzh.loc); //"中国" 在调用类的字段方法的时候，如果类没有，那么会自动跳转到上一级的原型对象__proto__查询是否有相关字段方法

      //方法也是同理
      Person.prototype.getName = function () {
        return this.name;
      };
      alert(mzh.getName());//调用了原型中的方法，如果调用失败返回未定义
      alert(mzh.__proto__ == Person.prototype); //true   对象的__proto__和构造函数的prototype指向一致
    </script>

---

拓展：hasOwnProperty()来检查对象自身中是否含有该属性

• 使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true

    <script type="text/javascript">
      function Person(name, age) {
        this.name = name;
        this.age = age;
      }
      mzh = new Person("mzh", "23"); //新建一个mzh对象
      Person.prototype.loc = "中国"; //给Person的原型对象添加一个loc属性，属性值是“中国”
      //方法也是同理
      Person.prototype.getName = function () {
        return this.name;
      };
      alert("in检查自身中是否有loc——" + "loc" in mzh); //true
      alert(
        "hasOwnProperty检查原型中是否有name——" + mzh.hasOwnProperty("name")
      ); //true
      alert("hasOwnProperty检查原型中是否有loc——" + mzh.hasOwnProperty("loc")); //false
    </script>

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2023 mzh

Crated：2023-3-1

欢迎关注 『Javascript基础重点』 专栏，持续更新中
欢迎关注 『Javascript基础重点』 专栏，持续更新中
『1.提前声明问题，你苦恼写了js函数代码但是不会生效的问题吗？』
『2.易错点之函数形参与函数作用域的坑』
『3.了解原型对象优雅地构造函数の“JS中的Java继承” 提高运行效率，优雅地使用对象』
『4.JS垃圾回收机制简析』
『5.以toString()为例学习JS中的java方法重写』
『6.数组的常用方法与数组遍历』
『7.函数进阶之call()和apply()与arguments』
『8.Date类与利用时间戳来测试代码的执行的性能』
『9.Math类方法』
『10.包装类』
『11.字符串的方法』
『12.正则表达式介绍 邮件正则表达式写法』
『13.dom的应用』
『未完待续』

---