[toc] ### 1. ES5中的面向對象(構造函數) 構造對象與構造類不分開，寫法一致 ``` function User(name, pass){ this.name = name; this.pass = pass; } //在原型上添加方法 User.prototype.showName = function(){ alert(this.name); } User.prototype.showPass = function(){ alert(this.pass); } var ul = new User('blue', '123456'); ul.showName(); ul.showPass(); ``` ### 2. ES6中的面向對象(構造函數) 1. class關鍵字、構造器和類分開了 2. class里面直接加方法，也可以直接在原型上`.prototype.`加 3. 創建類要在聲明class之后 ``` class User{ //原型 constructor(name, pass){ //構造器 this.name = name; this.pass = pass; } showName(){ //原型上的方法 alert(this.name); } showPass(){ alert(this.pass); } } var ul = new User('blue', '123456'); ul.showName(); ul.showPass(); ``` ### 3. 原型 聲明一個變量，它會具有一個`__proto__`屬性，指向它的原型，如`Number.prototype`，在原型上也有一個`__proto__`屬性，指向`Object` ``` var a = 10; // console.log(a); console.log(a.__proto__); ``` 在構造函數中的原型 ``` /* 整個類可視為一個原型 */ class Person{ constructor(name, age){ this.name = name; this.age = age; } sayName(){ console.log(this.name); } } var xu = new Person("xu", 21); console.log(xu); console.log(xu.__proto__); ``` ### 4. 繼承 1. js中每一個對象都有`__proto__`屬性，指向它的原型對象 2. javascript的繼承是基于原型的繼承 3. 繼承是繼承原型上的方法 4. `hasOwnProperty()` 可以檢查對象擁有的獨特屬性 ``` var a = [1, 2, 3]; Array.prototype.say = function(){ console.log("say"); } a.say(); //say ``` 4. Object.getPrototypeOf(obj) --> 獲取對象的原型 ``` console.log(Object.getPrototypeOf(a)); ``` #### 1. ES5中的繼承 ``` function VipUser(name, pass, level){ User.call(this, name, pass); this.level = level; } VipUser.prototype = new User(); VipUser.prototype.constructor = VipUser; VipUser.prototype.showLevel = function(){ alert(this.level); }; var v1 = new VipUser('blue', '12345', '3'); v1.showLevel(); ``` #### 2. ES6中的繼承 ``` class VipUser extends User{ constructor(name, pass, level){ super(name, pass); this.level = level; } showLevel(){ alert(this.level); } } var v1 = new VipUser('blue', '1234', 3); v1.showLevel(); ``` ### 5. __proto__和prototype `__proto__` 是實例具有的屬性，指向原型 `prototype` 是構造函數具有的屬性，可以直接通過`構造函數.prototype.函數名 = function(){}` 在原型上添加方法