爲什麼要用添加原型的方法豐富js自定義構造函數

在js面向對象思想裏,所有方法都要交給不同對象來實現具體功能,那麼問題來了。我們怎麼來創建對象,京可能優雅的方式創建對象呢?

老夫寫代碼要考慮優雅?不存在的,那就一把梭!

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <script>
    function Person(name, age) {
      this.name = name;
      this.age = age;
      this.sayHay = function () {
        console.log('Hi')
      }
    }

    var p1 = new Person('zs', 25);
    var p2 = new Person('ss', 25);
    console.log(p1.sayHay == p2.sayHay) //false
    /**
     * 意味着沒創建一個實例對象就實例化一次
     *複雜類型不會直接存值,會比較地址(也就是說是每次new都會在內存中創建新的地址)
     * 十分浪費性能
     * /
  </script>
</body>

</html>

這就尷尬了。。。。我要是創建幾十個對象,就實例化幾十次?額,傳出去不好聽把。。。那就換一種?

第二版改進下!你不是每創建一次就實例化一次這個匿名函數麼。。。那好

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <script>
    function sayHello() {
      console.log('sayHello')
    }

    function Person(name, age) {
      this.name = name;
      this.age = age;
      this.sayHay = sayHello
    }

    var p1 = new Person('zs', 25);
    var p2 = new Person('ss', 25);
    console.log(p1.sayHay == p2.sayHay) //true
    /**
      *那麼問題又來了。。。
      *這麼幹雖然我們把實例化對象提到外面,不會創建新的地址,都會指向sayHello
      *但是我們這樣的幹法。。。。又造成了全局污染。。。想得到我們幾百個對象,就要創建幾百個全局方法的恐怖麼。。。
      *我經歷過。。。
      */

  </script>
</body>

</html>

那好吧,再換換思路。。。原型鏈,瞭解下~

 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <script>
    function sayHello() {
      console.log('sayHello')
    }

    function Person(name, age) {
      this.name = name;
      this.age = age;
    }
    Person.prototype.sayHay = function () {
      console.log('Hi')
    }
    var p1 = new Person('zs', 25);
    var p2 = new Person('ss', 45);
    console.log(p1.sayHay == p2.sayHay) //true
    /**
     *通過原型創建出來的對象可以訪問原型上的任意方法
     */
  </script>
</body>

</html>

好吧,,,問題就這麼解決了。。。

哩個flag以後創建對象都用原型鏈把,,,,看以前寫的代碼,,腦殼痛

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章