JS對象、原型

Q&A:

1. OOP 指什么?有哪些特性

  • OOP,即Object Oriented Programming,面向對象編程,是計算機的一種編程架構,OOP的一條基本規則是,計算機程序由能夠起到子程序作用的單個或對象組合而成。包含屬性和方法的對象是類的實例,而JS中沒有類的概念,而是直接使用對象實現編程任務。
  • 特性
  • 封裝:能夠將一個實體的信息、功能、響應都裝在一個單獨對象中的特性;使編程過程不必拘泥于原理,而是重在實現;
  • 繼承:在不改變源程序的基礎上進行擴充,原功能得以保存,并且子程序能對其進行擴展,避免編寫重復代碼,提高工作效率;
  • 多態:允許將子類類型的指針賦值給父類類型的指針;原生JS是弱類型語言,沒有多態概念。

2. 如何通過構造函數的方式創建一個擁有屬性和方法的對象?

由于函數也是對象的一種,所以繼承了對象原型,可以對其添加屬性和方法,構造函數也是函數,所以用自定義函數的方式,并將首字母大寫以明確是構造函數即可,可以用new操作符創建函數實例驗證。

function Person(name) {
      this.name = name;
      this.sayName = function() {
        console.log(this.name);
      }
    }
構造函數

3. prototype 是什么?有什么特性

  • prototype,即原型,每創建一個函數都會有一個prototype屬性,這個屬性是一個指針,指向一個對象,這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。
  • 特性:讓所有對象實例共享原型對象所包含的屬性和方法:
function Person(name) {
      this.name = name;
    }
    Person.prototype.sayName = function() {
      console.log(this.name);
    }
    var p1 = new Person('zhao'),
        p2 = new Person('kevin');

    p1.sayName();
    p2.sayName();
prototype

4. 畫出如下代碼的原型圖

    <script>
      function People(name) {
        this.name = name;
        this.sayName = function() {
          console.log('my name is:' + this.name);
        }
      }

      People.prototype.walk = function() {
        console.log(this.name + 'is walking');
      }

      var p1 = new People('饑人谷');
      var p2 = new People('前端');
    </script>
原型圖

5. 以下代碼中的變量age有什么區別

      function People() {
        var age = 1;
        this.age = 10;
      }
      People.age = 20;

      People.prototype.age = 30;
  • var age = 1:age為局部變量;
  • this.age = 10:函數調用時,age為this指向對象的屬性;
  • People.age = 20:構造函數的age變為20;
  • People.prototype.age = 30:原型添加age屬性;

Coding:

1. 創建一個 Car 對象,擁有屬性name、color、status;擁有方法run,stop,getStatus

function Car(name, color, status) {
      this.name = name;
      this.color = color;
      this.status = status;
    }
    Car.prototype = {
      constructor : Car,
      run: function() {
        this.status = 'run';
      },
      stop: function() {
        this.status = 'stop';
      },
      getStatus: function() {
        console.log(this.status);
      }
    }

    var car1 = new Car('BMW', 'red', 'stop');
coding1

本文歸本人和饑人谷所有,如需轉載請注明出處

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容