摘要:說(shuō)明此摘要筆記系列是我最近看高級(jí)程序設(shè)計(jì)第版隨手所記。其中,描述符對(duì)象的屬性必須是設(shè)置其中一個(gè)或多個(gè)值,可以修改對(duì)應(yīng)的特性值。如支持的瀏覽器,可以取得指定屬性的描述符。
說(shuō)明:
此摘要筆記系列是我最近看《JavaScript高級(jí)程序設(shè)計(jì)(第3版)》隨手所記。
里面分條列舉了一些我認(rèn)為重要的、需要記下的、對(duì)我有幫助的點(diǎn),是按照我看的順序來(lái)的。
摘要筆記本身沒(méi)有系統(tǒng)性,沒(méi)有全面性可言,寫(xiě)在這里供有一定基礎(chǔ)的前端開(kāi)發(fā)者參考交流。
里面的知識(shí)點(diǎn)、例子大部分來(lái)源于本書(shū),或者延伸出來(lái)的,都經(jīng)過(guò)我的測(cè)試是對(duì)的,但是沒(méi)辦法保證100%正確,如果有人看到錯(cuò)誤的地方,希望指出來(lái),謝謝。
Math.E // 2.718281828459045 自然對(duì)數(shù)的底數(shù),即常量 e 的值 Math.PI // 派的值 3.141592653589793 Math.min() // 一組數(shù)中的最小值 Math.max() // 一組數(shù)中的最大值 // 取得數(shù)組中最大值的辦法 var arr = [10, 15, 8, 23] var max = Math.max.apply(Math, arr) console.log(max) // 23 Math.ceil() // 向上取整 Math.floor() // 向下取整 Math.round() // 四舍五入取整 Math.random() // 返回大于等于0小于1的隨機(jī)數(shù) Math.abs(num) // 返回 num 的絕對(duì)值 Math.log(num) // 返回 num 的自然對(duì)數(shù) Math.pow(num, power) // 返回 num 的power次冪 Math.sqrt(num) // 返回 num 的平方根 Math.cos(x) // 返回 x 的余弦值 Math.sin(x) // 返回 x 的正弦值 Math.tan(x) // 返回 x 的正切值 Math.acos(x) // 返回 x 的反余弦值 Math.asin(x) // 返回 x 的反正弦值 Math.atan(x) // 返回 x 的反正切值 Math.atan2(y, x) // 返回 y / x 的反正切值2. 深度拷貝對(duì)象的簡(jiǎn)單高效辦法
var rel = JSON.parse(JSON.stringify(obj))3. Object.assign() 方法可以把任意多個(gè)的源對(duì)象自身的可枚舉屬性拷貝給目標(biāo)對(duì)象,然后返回目標(biāo)對(duì)象Object.assign(target, ...sources),如:
var obj = {a: 1} var copy = {b: 3} var rel = Object.assign(b, obj) console.log(rel) // {a: 1, b: 3} copy === rel // true
假如需要深度拷貝的話,仍舊需要使用別的而不是本方法。因?yàn)?Object.assign() 拷貝的是在 source 里是對(duì)象的屬性的引用而不是對(duì)象本身。如:
var a = {b: 3, c: {e: 5}} var rel = Object.assign({}, a) console.log(rel.c.e) // 5 a.c.e = 8 console.log(rel.c.e) // 8 // 合并 objects var o1 = {a: 2} var o2 = {b: 5} var o3 = {c: 8} var rel = Object.assign(o1, o2, o3) console.log(rel) // {a: 2, b: 5, c: 8} console.log(o1) // {a: 2, b: 5, c: 8} rel === o1 // true // 繼承屬性和不可枚舉屬性是不能拷貝的 // 原始類(lèi)型會(huì)被包裝為 object4. 對(duì)象的屬性
ECMAScript 中有兩種屬性:數(shù)據(jù)屬性和訪問(wèn)器屬性
[[Configurable]]: 能否通過(guò) delete 刪除屬性從而重新定義屬性,能否修改屬性的特性,或者能否把屬性修改為訪問(wèn)器屬性。默認(rèn) true 。 [[Enumerable]]: 能否通過(guò) for-in 循環(huán)返回屬性。默認(rèn) true 。 [[Writable]]: 能否修改屬性的值。默認(rèn) true 。 [[Value]]: 包含這個(gè)屬性的數(shù)據(jù)值。讀取屬性的時(shí)候從這個(gè)位置讀;寫(xiě)入屬性值的時(shí)候,把新值保存在這個(gè)位置。默認(rèn)值 undefined 。
要修改屬性默認(rèn)的特性,需要通過(guò) es5 的 Object.defineProperty() 方法。這個(gè)方法接受三個(gè)參數(shù),屬性所在的對(duì)象,屬性的名字和一個(gè)描述符對(duì)象。
其中,描述符 (descriptor) 對(duì)象的屬性必須是:configurable, enumerable, writable, value. 設(shè)置其中一個(gè)或多個(gè)值,可以修改對(duì)應(yīng)的特性值。如:
var person = {} Object.defineProperty(person, "name", { writable: false, value: "abc" }) person.name // "abc" person.name = "wfc" // 嚴(yán)格模式下會(huì)報(bào)錯(cuò) person.name // "abc"
在調(diào)用 Object.defineProperty() 方法時(shí),如果不指定,configurable, writable, enumerable 的默認(rèn)值都是 false。
可以多次調(diào)用 Object.defineProperty() 來(lái)修改同一個(gè)屬性,但是在把 configurable 特性設(shè)置為 false 之后,
就只能把 writable 從 true 改成 false,其它設(shè)置都會(huì)報(bào)錯(cuò)。
訪問(wèn)器屬性不包含數(shù)據(jù)值,它們會(huì)包含一對(duì) getter setter 函數(shù)(都不是必須的)。在讀取訪問(wèn)器屬性時(shí),會(huì)調(diào)用 getter 函數(shù),這個(gè)函數(shù)負(fù)責(zé)返回有效的值;
在寫(xiě)入訪問(wèn)器屬性時(shí),會(huì)調(diào)用 setter 函數(shù)并傳入新值,這個(gè)函負(fù)責(zé)決定如何處理數(shù)據(jù)。訪問(wèn)器屬性有如下4個(gè)特性:
[[Configurable]]: 表示能否通過(guò) delete 刪除屬性從而重新定義屬性,能否修改屬性的特性,或者能否把屬性修改為數(shù)據(jù)屬性。 對(duì)于直接在對(duì)象上定義的屬性,默認(rèn)值 true 。 [[Enumerable]]: 表示能否通過(guò) for-in 循環(huán)返回屬性。對(duì)于直接在對(duì)象上定義的屬性,默認(rèn)值 true 。 [[Get]]: 在讀取屬性時(shí)調(diào)用的函數(shù)。默認(rèn)值 undefined 。 [[Set]]: 在寫(xiě)入屬性時(shí)調(diào)用的函數(shù)。默認(rèn)值 undefined 。
訪問(wèn)器屬性不能直接定義,必須使用 Object.defineProperty() 來(lái)定義。如:
var book = { _year: 2016, edition: 1 } Object.defineProperty(book, "year", { get: function () { return this._year }, set: function (newValue) { this.edition += 1 this._year = newValue } }) book.edition // 1 book.year = 2017 book.edition // 2
不必要同時(shí)指定 getter setter , 只指定 getter 意味著屬性不能寫(xiě),只指定 setter 意味著屬性不能讀
// 支持 Object.defineProperty() 的瀏覽器 IE 9+,F(xiàn)irefox 4+, Safari 5+, Opera 12+, Chrome5. Object.defineProperties() 可以通過(guò)描述符一次定義多個(gè)屬性。這個(gè)方法接受兩個(gè)參數(shù),第一個(gè)參數(shù)是要添加和修改其屬性的對(duì)象,
第二個(gè)參數(shù)是描述符。如:
var book = {} Object.defineProperties(book, { _year: { value: 2016, writable: true }, edition: { value: 1, writable: true }, year: { get: function () { return this._year }, set: function (value) { this._year = value this.edition += 1 } } }) // 支持 Object.defineProperties() 的瀏覽器 IE 9+,F(xiàn)irefox 4+, Safari 5+, Opera 12+, Chrome6. Object.getOwnPropertyDescriptor() 可以取得指定屬性的描述符。接受兩個(gè)參數(shù),屬性所在對(duì)象,屬性名稱。
只能取得實(shí)例屬性的描述符,要取得原型對(duì)象的描述符,要在原型對(duì)象上調(diào)用這個(gè)方法。
如上例中的 book :
Object.getOwnPropertyDescriptor(book, "_year") // {configurable: false, enumerable: false, writable: true, value: 2016} var rel = Object.getOwnPropertyDescriptor(book, "year") console.log(rel) // { // configurable: false, // enumerable: false, // get: function () { // return this._year // }, // set: function (value) { // this._year = value // this.edition += 1 // } // } typeof rel.get // "function" // 支持 Object.getOwnPropertyDescriptor() 的瀏覽器 IE 9+,F(xiàn)irefox 4+, Safari 5+, Opera 12+, Chrome7. 關(guān)于 OO
function Person (name, age) { this.name = name this.age = age this.sayName = function () { console.log(this.name) } } var ming = new Person("ming", 13) Person.prototype.constructor === Person // true ming.constructor === Person // true Person.constructor === Function // true Function.constructor === Function // true Function instanceof Function // true Function instanceof Object // true Person.prototype.sayHello = function () { console.log("hello") } ming.sayHello() // "hello" ming.__proto__.constructor === Person // true ming.__proto__ === Person.prototype // true8. 構(gòu)造函數(shù)
構(gòu)造函數(shù)與其它函數(shù)唯一的區(qū)別在于調(diào)用方式的不同,不存在定義構(gòu)造函數(shù)的特殊語(yǔ)法。如果不通過(guò) new 操作符來(lái)調(diào)用,那它跟普通函數(shù)沒(méi)有區(qū)別。如上面的例子:
var li = new Person("li", 15) li.sayName() // "li" Person("yang", 18) window.sayName() // "yang" var o = {} Person.call(o, "wang", 20) o.sayName() // "wang"9. 原型模式
我們創(chuàng)建的每個(gè)函數(shù)都有一個(gè) prototype(原型) 屬性,這個(gè)屬性是一個(gè)指針,指向一個(gè)對(duì)象,這個(gè)對(duì)象的用途是包含所有實(shí)例共享的屬性和方法。如:
function Person (name, age) { this.name = name this.age = age this.sayName = function () { console.log(this.name) } } Person.prototype.sayHello = function () { console.log("hello") } var ming = new Person("ming", 12) var li = new Person("li", 15) ming.sayHello === li.sayHello // true ming.sayHello === Person.prototype.sayHello // true
可以通過(guò) isPrototypeOf() 方法來(lái)確定對(duì)象直接是否存在 原型-實(shí)例 關(guān)系,如:
Person.prototype.isPrototypeOf(ming) // true
es5 新增方法 Object.getPrototypeOf() 這個(gè)方法返回實(shí)例的 proto 即實(shí)例的構(gòu)造函數(shù)的原型的值,如:
Object.getPrototypeOf(ming) === Person.prototype // 支持 Object.getPrototypeOf() 的瀏覽器 IE 9+,F(xiàn)irefox 3.5+, Safari 5+, Opera 12+, Chrome10. hasOwnProperty() 方法可以檢測(cè)一個(gè)屬性是存在于實(shí)例中,還是原型中。這個(gè)方法只在屬性存在于實(shí)例中時(shí)才返回 true 。in 操作符多帶帶使用,只要能夠通過(guò)該對(duì)象訪問(wèn)給定屬性就返回 true, 如上例:
ming.hasOwnProperty("sayHello") // false "sayHello" in ming // true ming.hasOwnProperty("sayName") // true "sayName" in ming // true ming.sayHello = function () { console.log("hello in self") } ming.hasOwnProperty("sayHello") // true "sayHello" in ming // true delete ming.sayHello ming.hasOwnProperty("sayHello") // false "sayHello" in ming // true ming.hasOwnProperty("sayHello1") // false "sayHello1" in ming // false
即使將實(shí)例屬性設(shè)置為 undefined / null , hasOwnProperty() in 這兩個(gè)方法仍然返回 true
function hasPrototypeProperty (object, name) { return !object.hasOwnProperty(name) && name in object }
for-in 循環(huán)返回的是所有能夠通過(guò)對(duì)象訪問(wèn)的、可枚舉的(enumerable: true)屬性,既包括實(shí)例中的屬性又包括原型中的屬性。
11. es5 的 Object.keys() 方法,接受一個(gè)對(duì)象作為參數(shù),返回實(shí)例上所有可枚舉屬性的字符串組成的數(shù)組。如:var Person = function () {} Person.prototype.sayHello = function () { console.log("hello") } var ming = new Person() ming.name = ming Object.keys(ming) // ["name"] Object.getOwnPropertyNames() 方法可以得到所有實(shí)例屬性,包括不可枚舉的。 // 支持 Object.keys() 和 Object.getOwnPropertyNames() 的瀏覽器 IE 9+,F(xiàn)irefox 4+, Safari 5+, Opera 12+, Chrome
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/91302.html
摘要:如果重設(shè)構(gòu)造函數(shù)的原型對(duì)象,那么,會(huì)切斷新的原型對(duì)象和任何之前已經(jīng)存在的構(gòu)造函數(shù)實(shí)例之間的聯(lián)系,它們引用的仍然是最初的原型。說(shuō)明返回的對(duì)象與構(gòu)造函數(shù)或者與構(gòu)造函數(shù)的原型屬性沒(méi)有關(guān)系。 說(shuō)明: 此摘要筆記系列是我最近看《JavaScript高級(jí)程序設(shè)計(jì)(第3版)》隨手所記。里面分條列舉了一些我認(rèn)為重要的、需要記下的、對(duì)我有幫助的點(diǎn),是按照我看的順序來(lái)的。摘要筆記本身沒(méi)有系統(tǒng)性,沒(méi)有全面性...
摘要:說(shuō)明此摘要筆記系列是我最近看高級(jí)程序設(shè)計(jì)第版隨手所記。摘要筆記本身沒(méi)有系統(tǒng)性,沒(méi)有全面性可言,寫(xiě)在這里供有一定基礎(chǔ)的前端開(kāi)發(fā)者參考交流。對(duì)每一項(xiàng)運(yùn)行給定函數(shù),返回該函數(shù)會(huì)返回的項(xiàng)組成的數(shù)組。是的反操作是的反操作第一部分結(jié)束。 說(shuō)明: 此摘要筆記系列是我最近看《JavaScript高級(jí)程序設(shè)計(jì)(第3版)》隨手所記。 里面分條列舉了一些我認(rèn)為重要的、需要記下的、對(duì)我有幫助的點(diǎn),是按照我看...
摘要:函數(shù)表達(dá)式和閉包函數(shù)聲明的一個(gè)重要特征是函數(shù)聲明提升如遞歸遞歸函數(shù)是在一個(gè)函數(shù)通過(guò)名字調(diào)用自身的情況下構(gòu)成的。注意中已經(jīng)是塊級(jí)作用域了,所以這些東西感覺(jué)實(shí)際用途沒(méi)有那么大,但是對(duì)理解閉包對(duì)作用域鏈中的屬性的引用,這一點(diǎn)還是有作用的。 函數(shù)表達(dá)式和閉包 1. 函數(shù)聲明的一個(gè)重要特征是函數(shù)聲明提升 如: sayHi() function sayHi () { console.log(h...
摘要:關(guān)于對(duì)象定義了全局對(duì)象。支持的瀏覽器有除了接受要序列化的對(duì)象外,還可以接受另外兩個(gè)參數(shù)。如果是數(shù)值,則表示每個(gè)級(jí)別縮進(jìn)的空格數(shù),最大,超過(guò)的值自動(dòng)轉(zhuǎn)換成。字符串長(zhǎng)度超過(guò),結(jié)果中將只出現(xiàn)前個(gè)字符。會(huì)在結(jié)果字符串中插入換行符提高可讀性。 關(guān)于JSON 1. JSON 對(duì)象 es5 定義了全局對(duì)象 JSON。支持的瀏覽器有 IE8+ 、Firefox 3.5+ 、Safari 4+、Chro...
摘要:思路是,使用原型鏈對(duì)原型屬性和方法進(jìn)行繼承,借用構(gòu)造函數(shù)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。注意使用寄生式繼承來(lái)為對(duì)象添加函數(shù),會(huì)由于不能做到函數(shù)復(fù)用而降低效率,這一點(diǎn)與構(gòu)造函數(shù)模式類(lèi)似。無(wú)論什么情況下都會(huì)調(diào)用兩次超類(lèi)型的構(gòu)造函數(shù)。 說(shuō)明: 此摘要筆記系列是我最近看《JavaScript高級(jí)程序設(shè)計(jì)(第3版)》隨手所記。里面分條列舉了一些我認(rèn)為重要的、需要記下的、對(duì)我有幫助的點(diǎn),是按照我看的順序來(lái)的...
閱讀 1041·2019-08-30 12:57
閱讀 2114·2019-08-30 11:11
閱讀 2177·2019-08-29 15:20
閱讀 1870·2019-08-29 14:12
閱讀 3274·2019-08-28 17:51
閱讀 2378·2019-08-26 13:23
閱讀 789·2019-08-26 10:34
閱讀 3844·2019-08-23 12:37