1. 程式人生 > >Constructor 與 object 區別和聯絡

Constructor 與 object 區別和聯絡

1. Constructor:是用於建立和初始化類中建立的一個物件的一種特殊方法。

constructor([arguments])

 { ... }

在一個類中只能有一個名為 “constructor” 的特殊方法。 一個類中出現多次建構函式 (constructor)方法將會丟擲一個 SyntaxError 錯誤。

在一個構造方法中可以使用super關鍵字來呼叫一個父類的構造方法。

如果沒有顯式指定構造方法,則會新增預設的 constructor 方法。

如果不指定一個建構函式(constructor)方法, 則使用一個預設的建構函式(constructor)。

如果不指定構造方法,則使用預設建構函式。對於基類,預設建構函式是:

constructor() {}

對於派生類,預設建構函式是:

constructor(...args) {

  super(...args);

}

2.Object:

起源:物件(Object)是某一個類(Class)的例項(Instance) ,因此說有物件之前必須先有型別,然後再將型別例項化就得到了物件。

(1)Object.assign()

可以用作物件的複製

var obj = { a: 1 };

var copy = Object.assign({}, obj);

console.log(copy); // { a: 1 }

可以用作物件的合併

var o1 = { a: 1 };

var o2 = { b: 2 };

var o3 = { c: 3 };

var obj = Object.assign(o1, o2, o3);

console.log(obj); // { a: 1, b: 2, c: 3 }

console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目標物件自身也會改變。

(2)Object.is()

Object.is(‘haorooms‘, ‘haorooms‘);     // true

Object.is(window, window);   // true

Object.is(‘foo‘, ‘bar‘);     // false

Object.is([], []);           // false

var test = { a: 1 };

Object.is(test, test);       // true

Object.is(null, null);       // true

// 特例

Object.is(0, -0);            // false

Object.is(-0, -0);           // true

Object.is(NaN, 0/0);         // true

(3)Object.keys()

這個方法會返回一個由給定物件的自身可列舉屬性組成的陣列,陣列中屬性名的排列順序和使用 for...in 迴圈遍歷該物件時返回的順序一致 (兩者的主要區別是 一個 for-in 迴圈還會列舉其原型鏈上的屬性)。

/* 類陣列物件 */

var obj = { 0 : "a", 1 : "b", 2 : "c"};

alert(Object.keys(obj));

// 彈出"0,1,2"

/* 具有隨機鍵排序的陣列類物件 */

var an_obj = { 100: ‘a‘, 2: ‘b‘, 7: ‘c‘ };

console.log(Object.keys(an_obj));

// console: [‘2‘, ‘7‘, ‘100‘]

(4)Object.create()

Object.create(proto, [ propertiesObject ])

第二個引數是可選的,主要用於指定我們建立的物件的一些屬性,(例如:是否可讀、是否可寫,是否可以列舉等等)可以通過下面案例來了解第二個引數!

ar o;

o = Object.create(Object.prototype, {

  // foo會成為所建立物件的資料屬性

  foo: { writable:true, configurable:true, value: "hello" },

  // bar會成為所建立物件的訪問器屬性

  bar: {

    configurable: false,

    get: function() { return 10 },

    set: function(value) { console.log("Setting `o.bar` to", value) }

}})

// 建立一個以另一個空物件為原型,且擁有一個屬性p的物件

o = Object.create({}, { p: { value: 42 } })

// 省略了的屬性特性預設為false,所以屬性p是不可寫,不可列舉,不可配置的:

o.p = 24

o.p

//42

o.q = 12

for (var prop in o) {

   console.log(prop)

}

//"q"

delete o.p

//false

//建立一個可寫的,可列舉的,可配置的屬性p

o2 = Object.create({}, { p: { value: 42, writable: true, enumerable: true, configurable: true } });

三、Arrow functions restore

在js中,函式可以用 "arrow" => 定義。

1.箭頭函式的語法:

const show=(a,b) => a+b;

show(1,5); // 結果返回6

之前,傳統的函式定義:

function show(a,b){

return a+b;

}

show(1,5) //結果返回6

 

2.箭頭函式傳遞一個引數:

const show=a => a+1; // 這樣可以,引數不加括號

const show=(a) => a+1; //加上括號也可以,建議加上√

箭頭函式不傳遞引數:

const show=() => 'welcome strive'; //此時圓括號必須加上

 

3.完整的箭頭函式形式:

const show=a =>{

const b=12;

return a+b;

}

show(5); //返回結果 17

const show=(a,b)=>{

return a+b;

}

show(12,5); //返回結果 17

* 箭頭函式需要注意的地方:

箭頭函式裡面不在提供一個arguments物件了

const show= x => console.log(arguments);

show(12.5) // arguments is not defined

當然還有,caller/callee都不在支援了

關於arguments那個問題,可以解決:

const show=(...arr) => console.log(arr);

show(12,5);

 

4.箭頭函式裡面this

var name='window-strive';

var obj={

name:'strive',

showName:()=>{

alert(this.name); //結果是 window-strive

}

}

obj.showName();

 

5.隱式return

const show= x=> x+1; //類似這種語句沒有寫return,叫做隱式return

show(1); // 返回結果2

隱式return需要有個注意的地方:

const show=()=>{a:1}; //想返回json,但是這個答案為 undefined

const show=()=>({a:1}); //加上括號了,結果就是 {a:1}

 

6.顯式return(自己動手寫return了)

const show=x=>{

return x+1;

}

show(1); //結果為2

總結一下:

箭頭函式的語法:

x=>y; // 隱式的return

x=>{return y}; //顯式的return

(x,y,z) => {....} //多個引數

(()=>{ // 自執行匿名函式 IIFE

//....code

});

 

https://www.cnblogs.com/lan-yu/p/9925627.html