本篇文章帶給大家的內容是關於javascript物件聲明有幾種方式? javascript物件聲明的六種方式 ,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
-- 新向知識,就不用ES6寫法了。
var obj = { 属性名1 : 属性值, 属性名2 : 属性值, 属性名3 : 属性值, 方法名1 : function() { ..... }, 方法名2 : function() { ..... } }
透過obj.屬性名
或obj.方法名()
就可以讀取或呼叫物件的屬性/方法了。
var obj = new Object(); obj.属性名1 = 属性值1; obj.属性名2 = 属性值2; obj.属性名3 = 属性值3; obj.属性名4 = 属性值4; obj.方法名1 = function() { .... }; obj.方法名2 = function() { .... }; ....
先用new Object()
建立一個空對象,然後用多條語句為物件新增屬性/方法。
函數Function
本身就是物件Object
的實例
var fn = new Function(); //new一个空函数 function myFn() {}; //声明一个空函数 console.log(fn instanceof Object); //true console.log(myFn instanceof Object); //true
所以可以模仿new Objcet()
建構物件的方式,用function myFn() {}
宣告一個自訂的函數,然後透過new myFn()
建構對象,例如:
function person(name, age) { this.name = name; this.age = age; this.say = function() { console.log('My name is '+ this.name + ', I\'m ' + this.age + ' years old'); } } var xiaoMing = new person('xiaoming', 16); xiaoMing.say(); //"My name is xiaoming, I'm 16 years old"
透過這種方式聲明的對象,每一次new
出來的對像都是獨立的,互相不會有影響,屬性、方法中的this
指向的就是新建立的、呼叫他們的物件。
工廠模式聲明物件可以理解成二、三兩種方法的結合體,用三的思想套進二的內容。仿照上面例子舉例:
function person(name, age) { var obj = new Object(); obj.name = name; obj.age = age; obj.say = function() { console.log('My name is '+ obj.name + ', I\'m ' + obj.age + ' years old'); }; return obj; } var xiaoMing = person('xiaoming', 16); xiaoMing.say(); //"My name is xiaoming, I'm 16 years old" var xiaoHong = person('xiaohong', 18); xiaoHong.say(); //"My name is xiaohong, I'm 18 years old"
工廠模式之所以叫工廠模式,就是類似於現實生活中的工廠可以產生大量相似的商品,去做同樣的事情,實現同樣的效果。他的寫法與三、用函數宣告的方式建構物件
比較像,但是稍有不同。
每一次呼叫function
宣告的函數時,它在內部new Object()
,最後將這個新建的物件return
回來,呼叫時就像普通函數呼叫一樣,實例化的時候不用再new
了(內部new過)。雖然多次呼叫函數走的都是一樣的流程,但是生產出來的兩個產品互不影響。
function person() {/*空*/}; person.prototype.height = "1.80m"; person.prototype.grade = "Senior 3"; person.prototype.say = function() { console.log( 'I\'m ' + this.height + ' tall and I\'m in '+ this.grade); } var xiaoMing = new person(); xiaoMing.say(); //"I'm 1.80m tall and I'm in Senior 3"
原型方式是將該物件的屬性/方法寫在他的prototype
屬性所指的物件上。 (每一個函數或說物件都有一個prototype
屬性,這個屬性以物件的形式存在)。
每次new
其實有這麼一些操作:
1)建立一個空物件
2)把這個空物件的__proto__
指向建構子的prototype
3)把這個空物件賦值給this
4)執行建構子內的程式碼
new
出來的新物件的__proto__
屬性都會指向person.prototype
,然後就可以執行person.prototype
上的函數內容了。
這有點像是JS上常說的事件代理/委託。事件不直接綁定在該DOM元素上,而是綁定在它的父級元素,當給該DOM元素添加兄弟元素時,兄弟元素因為冒泡,能觸發相同的事件。
混合模式可以理解成原型模式建構函數,舉例:
function person(name, height) { this.name = name; this.height = height; }; person.prototype.age = 18; person.prototype.grade = "Senior 3"; person.prototype.say = function() { console.log('Hello, my name is ' + this.name + '. I\'m ' + this.age + ' years old, ' + this.height + ' tall and I\'m in '+ this.grade + '.'); } var xiaoMing = new person('Xiaoming', '1.80m'); xiaoMing.say(); //"Hello, my name is Xiaoming. I'm 18 years old, 1.80m tall and I'm in Senior 3." var xiaoHong = new person('Xiaohong', '1.65m') xiaoHong.say(); //"Hello, my name is Xiaohong. I'm 18 years old, 1.65m tall and I'm in Senior 3."
對比混合模式和原型模式可以發現,混合模式函數體不是空的,而函數體內的內容就是前邊說的構造。
這種方式在實際開發中更常用。
相關推薦:
JavaScript下申明物件的幾種方法小結_javascript技巧
基於JavaScript 宣告全域變量的三種方式詳解_基礎知識
以上是javascript物件聲明有幾種方式? javascript物件聲明的六種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!