javascript 對象的建立與繼承模式

時間  2019-12-05
標籤 javascript 對象 建立 繼承 模式 欄目 JavaScript 简体版
原文   原文鏈接

針對JS高級程序設計這本書，主要是理解概念，大部分要點源自書內。寫這個主要是當個筆記加總結javascript

存在的問題請你們多多指正！java

6.1理解對象

建立對象的兩個方法（暫時）chrome

 1 //第一種，經過建立一個Object類型的實例，而後爲他添加屬性和方法
 2 var person = new Object()
 3     person.name = 'laotie'
 4     person.sayName = function(){
 5         alert(this.name)
 6 }   
 7 //第二種簡化版
 8 var person = {
 9     name: 'laotie',
10     sayName: {
11         alert(this.name)
12     }
13 }

 

6.1.1 類型屬性

1.數據屬性

JS不能訪問的數據屬性app

  • Configurable 能不能用delete刪除 默認true
  • Enumerable 可否經過for-in循環返回屬性 默認true
  • Writable 可否修改屬性 默認true
  • Value 就是這個屬性的屬性值 默認undefined

Object.defineProperty（）接收三個參數：屬性所在的對象，屬性的名字和一個描述符對象 描述符對象必須是上面那四個函數

var person = {}
Object.defineProperty(person, 'name', {\
    //我設置了，其中person的屬性name，因此name這個屬性他就動不了了
    writable: false,
    value: 'laotie'
})

alert(person.name) //'laotie'
person.name = '666'
alert(person.name) //'laotie'

 

若是用Object建立的屬性通常configurable,enumerable,writable的默認值都是false，若是不用他建立的話就沒有限制。優化

總之這個東西沒什麼太大實際用處,幫助理解吧ui

2.訪問器屬性
  • Configurable, enumerable 跟上面的差很少
  • Get 在讀取屬性時調用的函數
  • Set 在寫入時調用的屬性 get,set默認都爲undefined
var book = {
        _year: 2004
        edition: 1
    }
    
    Object.defineProperty(book, 'year', {
        //這裏放剛纔的屬性
        get: function(){
            return this._year
        },
        set: function(newValue){
            if(newValue > 2004){
                this._year = newValue
                this.edition += newValue - 2004
            }
        }
        
    })
    
    book.year = 2005
    alert(book.edition) //2

 

老方法不介紹了，是直接在對象後面調用__defineGetter__和__defineSetter__,參數裏面第一個是屬性，第二個穿進去個處理函數this

6.1.2定義多個屬性

ES5加了個牛逼的Object.defineProperties（）方法
第一個參數裏放要修改屬性的對象 ，第二個加個代碼塊裏面方參數spa

var book = {}
Object.defineProperties(book,{
    _year: {
        writable: true,
        value:2004
    },
    edition: {
        writable: true,
        value: 1
    },
    set:function(newValue){
        if(newValue > 2004){
                this._year = newValue
                this.edition += newValue - 2004
            }
    }
})

 

6.1.3讀取屬性的特性

Object.getOwnPropertyDescriptor()prototype

var descript = Object.getOwnPropertyDescriptor(book, '_year')
alert(descript.value) //2004
alert(descript.configurable) //false

 

6.2建立對象

6.2.1工廠模式

fucntion createPerson(name, age, job){
    var o = new Object()
    o.name = name
    o.age = age
    o.job = job
    o.sayName = function(){
        alert(this.name)
    }
    
    return o 
}

var person1 = creatPerson('laotie', 26, 'meiyou')

 

無法解決你這個對象什麼類型的，由於對象在裏面建立的，很迷

6.2.2構造函數模式

    //構造函數首字母大寫 Person
    function Person(name, age, job){
        this.name = name 
        this.age = age
        this.job = job
        this.sayName = function(){
            alert(this.name)
        }
    }
    //有個new
    var person1 = new Person('laotie', 26, 'meiyou')

 

用instanceof驗證是誰的實例

person1 instanceof Object //true person1 instanceof Person //true
  • 若是不按套路用構造函數能夠不用new 而後也能夠沒有變量接着
Person('laotie', 25, '666') //添加對象到window
window.sayName() //‘laotie’

 

構造函數中的方法在不停的聲明function實例，每個同名function經過新對象的建立都在不停地複製着等於this.sayName = new Function('alert(this.name)')

能夠這樣改

    //構造函數首字母大寫 Person
    function Person(name, age, job){
        this.name = name 
        this.age = age
        this.job = job
        this.sayName = sayName
    }
    
   function sayName(){
        alert(this.name)
   }

 

可是這樣構建函數的話沒有封裝性可言，因此要用原型模式

6.2.3原型模式

每一個函數都有一個prototype屬性指向原型對象

//標準的原型模式函數是沒有參數的
function Person(){}

Person.prototype.name = 'laotie'
Person.prototype.age = 29
Person.prototype.job = '666'
Person.prototype.sayName = function(){
    alert(this.name)
}

 

缺點：新建的全部對象全部屬性都共享，沒有傳參

只要建立一個新函數， 那他就有一個原型的屬性（prototype這個屬性），這個屬性指向他的原型對象，原型對象自動得到一個constructor屬性（叫構造函數的屬性），這個屬性指向prototype屬性所在的函數，新建的實例函數裏都會有一個不可見的[[Prototype]]的屬性（這個對象在火狐safari和chrome裏能夠看見，叫__proto__）指向原型對象

原型模式函數建立的對象能夠再給屬性賦值，賦的值能夠掩蓋原型對象中的值
delete你本身賦的值以後原型對象裏的值還能夠用

person1.hasOwnProperty('name') //能夠看有無本身賦值的屬性，有事true ，沒有false
'name' in person1 //不論是本身的屬性仍是原型對象裏的屬性，只要有值就是true

 

簡單點的設置prototype

function Person(){}
Person.prototype = {
    //通常加上constructor: Person 要否則構造函數就跑到Object了
    constructor: Person
    name:'laotie',
    sayName: function(){
        alert(this.name)
    }
}

 

新建對象是必定要在構造的後面哈，在前面建對象的話會斷開和新建的原型對象的連接
function Person(){}
var person1 = new Person()
//至關於從新設置了Person的原型對象，如今的原型對象和person不是同一個了，因此person1中沒有sayName這個函數
Person.prototype = {
    constructor: Person
    name:'laotie',
    sayName: function(){
        alert(this.name)
    }
}
person1.sayName() //error

 

有個很大的毛病，就是原型模式函數不能本身傳參，因此不管新建多少對象都是一個德行，沒有屬於本身的屬性

6.2.4 把構造函數模式和原型模式組合一波

構造的定義不同的屬性，而原型模式構造同樣的屬性

function Person(name,age,job){
    this.name = name 
    this.age = age
    this.job = job
}

Person.prototype = {
    constructor: Person,
    sayName: function(){
        alert(this.name)
    }
}

 

6.3繼承

6.3.1原型鏈

原型模式構造函數：

  • 每一個構造函數都會都會有一個原型對象，原型對象contrustor指向構造函數，實例對象[[prototype]]屬性指向原型對象。

原型鏈就是把superType的實例對象給subType構造函數當原型。

還跟原型構造函數要注意的同樣，就是在新建實力以後更改構造函數的原型，要否則就會斷絕實例對象和新原型對象之間的聯繫

  • function SuperType(){
    this.property = true
}

SuperType.prototype.getSuperValue = function(){
    return this.property
}

function SubType(){
    this.subproperty = false
}

SubType.prototype = new SuperType()

SubType.prototype.getSubValue = function(){
    return this.subproperty
}

var instance = new SubType()

alert(instance.getSuperValue) //true

     

    原型模式參數傳遞不方便，因此菜的一批，因此借用構造函數

6.3.2 借用構造函數

就是在SubType裏call或者apply一個SuperType,至關於在SubType調用了SuperType裏的全部東西，因此就瓜熟蒂落的繼承過來了

function SuperType(){
    this.color = ['red', 'blue']    
}

function SubType(){
    SuperType.call(this)
}

var instance1 = new SubType()
instance1.colors.push('black')
alert(instance1.colors) //red,blue,black

var instance2 = new SubType()
alert(instance.colors) //red,blue

 

與原型的不一樣就是能夠傳參數，而後用call的第二個後面或者apply的第二個函數賦值

可是問題是方法都在構造函數裏，函數無法複用，因此就用組合式的比較吊，能夠傳參，能夠函數複用

6.3.4 組合式繼承

就是上面說的，用借用構造函數傳參和設定基本屬性，用原型鏈來作方法的複用

function SuperType(name) {
  this.name = name
  this.colors = ['red', 'blue']
}

SuperType.prototype.sayName = function() {
  alert(this.name)
}

function Subtype(name, age) {
//第二處這裏在call的時候又引入了name 和color屬性。因此重複了，這也是組合繼承的缺點
  SuperType.call(this, name)
  this.age = age
}
//第一處在設置原型對象時候在原型對象中 有name 和color屬性了，看上面⤴️
Subtype.prototype = new SuperType()
Subtype.prototype.constructor = SubType
Subtype.prototype.sayAge = function (){
  alert(this.age)
}

 

這樣的好處是能夠傳入參數能夠有本身的屬性，而後又能夠有共同的函數

6.3.4 原型式繼承

Object.creat()這個方法，能夠放一個或者兩個參數，一個參數的時候是第一個是一個對象
第二個函數是能夠附加一些屬性，經過{name:'laotie'}這樣的直接加進去

原理相似下面

function object(o){
    function F(){}
    F.prototype = o
    return new F()
}

 

其實就是講一個對象豐富了加了一些屬性，而後再返回一個實例對象。有一個弊端，沒有creat以前的內容和屬性始終會共享。

6.3.5 寄生式繼承

這個書上也沒有仔細講，給我感受就是傳進來一個對象，而後經過內部增強一些內容再返還出去

function creatAnother(original){
    var clone = object(original)
    clone.sayhi = funciton(){
        alert('hi')
    }
    return clone
}

 

6.3.6 寄生組合式繼承

尼古拉斯挑了個原型鏈繼承的和借用繼承的毛病，就是裏面的參數會重複的建，佔用內存，因此爲了優化，就找了個寄生組合繼承，給我感受像是借用加上原型式（不是原型鏈繼承模式是原型式）模式

function inheritPrototype(subType,SuperType){
    var prototype = object(SuperType.prototype)
    prototype.constructor = subType
    subtype.prototype = prototype
}

 

這個不就是原型式繼承嗎？爲啥要帶上寄生式，感受沒寄生式啥事。
而後剩下的用借用就好了

完整代碼：

function SuperType(name){
    this.name = name 
    this.colors = ['red','blue']
}

SuperType.prototype.sayName = function(){
    alert(this.name)
}

function SubType(name,age){
    SuperType.call(this,name)
    this.age = age
}

inheritPrototype(subType,SuperType)

SubType.prototype.sayAge = function(){
    alert(this.age)
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程