JavaScript 學習

原型對象

1、概念

function Person(name, age, sex) {
    this.name = name
    this.age = age
    this.sex = sex
}
const xiaoMing = new Person('小明', 19, '男')

咱們所建立的每個函數， 解析器都會向函數中添加一-個屬性prototype

這個屬性對應着一個對象，這個對象就是咱們所謂的原型對象

若是函數做爲普通函數調用prototype沒有任何做用

當函數以構造函數的形式調用時，它所建立的對象中都會有一個隱含的屬性，

指向該構造函數的原型對象，咱們能夠經過__ proto__ 來訪問該屬性

xiaoMing.__proto__ === Person.prototype

原型對象就至關於一一個公共的區域，全部同一個類的實例均可以訪問到這個原型對象
咱們能夠將對象中共有的對象放入原型對象中

Person.prototype.nationnality = "Chinese"

當咱們訪問對象的一個屬性或方法時，它會先在對象自身中尋找，若是有則直接使用，
若是沒有則會去原型對象中尋找，若是找到則直接使用

const Tom = new Person('Tom', 20, '男')
Tom.Chinese = "American"
console.log(xiaoMing.nationnality, Tom.nationnality)  // "Chinese" "American"

2、檢查對象中是否有某個屬性

一、in

只要對象或者原型中存在，則返回true

console.log("nationnality" in xiaoming) // true
console.log("nationnality" in Tom) // true

二、hasOwnProperty()

只有對象中存在纔會返回true，原型中存在而對象中不存在返回false

console.log(xiaoming.hasOwnProperty('nationnality')) // false
console.log(Tom.hasOwnProperty('nationnality')) // true

3、原型的原型

原型對象也是對象，因此它也有原型，
當咱們使用一個對象的屬性或方法時，會如今自身中尋找，
自身中若是有，則直接使用，
若是沒有則去原型對象中尋找，若是原型對象中與，則使用，
若是沒有則去原型的原型中尋找,直到找到 Object 對象的原型，
object對象的原型沒有原型，若是在 Object 中依然沒有找到，則返回 null

console.log(xiaoMing.__proto__) // Person { nationnality: 'Chinese' }
console.log(xiaoMing.__proto__.__proto__) // {}
console.log(xiaoMing.__proto__.__proto__.__proto__) // null

垃圾回收(GC:gabage collect)

當一個對象沒有任何的變量或屬性對它進行引用，此時咱們將永遠沒法操做該對象，
此時這種對象就是一個垃圾，這種對象過多會佔用大量的內存空間，致使程序運行變慢，
因此這種垃圾必須進行清理。
在JS中擁有自動的垃圾回收機制，會自動將這些垃圾對象從內存中銷燬，
咱們不須要也不能進行垃圾回收的操做
咱們須要作的只是要將再也不使用的對象設置 null 便可

let obj = new Object() // 該操做在內存中開闢了空間
obj = null // 開闢的空間沒法使用了

數組方法

方法	概述
concat()	鏈接兩個或更多的數組，並返回結果。
join()	把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。
pop()	刪除並返回數組的最後一個元素
push()	向數組的末尾添加一個或更多元素，並返回新的長度。
reverse()	顛倒數組中元素的順序。
shift()	刪除並返回數組的第一個元素
slice()	從某個已有的數組返回選定的元素
sort()	對數組的元素進行排序
splice()	刪餘元素，並向數組添加新元素。
toSource()	返回該對象的源代碼。
toString()	把數組轉換爲字符串，並返回結果。
toLocaleString()	把數組轉換爲本地數組，並返回結果。
unshift()	向數組的開頭添加一個或更多元素，並返回新的長度。
valueOf()	返回數組對象的原始值

slice()

arrayObject.slice(start, end)
該方法不會改變原數組，而是返回一個新數組
start, end 傳負值取倒數

splice()

arrayObject.splice(start, num, item1, item2, ...)
刪除數組的指定下標後的 num 個元素，並添加新元素(可選)
該方法會改變原數組，並返回被刪除的數組，原數組爲刪除剩下的數組

const arr = ['one', 'two', 'three', 'four']

可刪除元素
arr.splice(1, 1) // 刪除 two

可替換元素
arr.splice(1, 1, 'twoReplace') // 將 two 替換爲 twoReplace

可插入元素
arr.splice(1, 0, 'twoInsert') // 在 two 前面插入 twoInsert

call() 和 apply()

這兩個方法都是函數對象的方法，須要經過函數對象來調用
當對函數調用 call() 和 apply() 都會調用函數執行
在調用 call() 和 apply() 能夠將一個對象指定爲第一個參數
此時這個對象將會成爲函數執行時的this

fuction fun() {
    console.log(this)
}
// window對象

const obj = {}
fun.call(obj)
// obj

call() 方法能夠將實參在對象以後依次傳遞
apply() 方法須要將實參封裝到一個數組中統一傳遞

fuction fun(a, b) {
    console.log(a, b)
}

const obj = {}
fun.call(obj, 2, 3)
// 2, 3
fun.call(obj, [2, 3])
// 2, 3

this

1. 以函數形式調用時，thi s永遠都是window
2. 以方法的形式調用時，thi s是調用方法的對象
3. 以構造函數的形式調用時，thi s是新建立的那個對象
4. 使用call和app1y調用時，thi s是指定的那個對象

函數的隱含參數

一.函數的上下文對象this

二.封裝實參的對象arguments

arguments 是一個類數組對象 ,它也能夠經過索引來操做數據，也能夠獲取長度
在調用函數時，咱們所傳遞的實參都會在 arguments 中保存

arguments.length能夠用來獲取實參的長度

咱們即便不定義形參， 也能夠經過arguments來使用實參，

arguments[index]

它裏邊有一個屬性叫作 callee，對應的是當前正在指向的函數的對象

DOM 操做

1、概覽

document.body

body

document.documentElement

html

documnet.getElementByClassName()

根據類獲取DOM
兼容性：ie9+（兼容性不足）

document.querySelector()

可根據CSS選擇器來獲取DOM，但只返回符合條件的第一個DOM
兼容性：ie8+

document.querySelectorAll()

返回符合條件的全部DOM組成的數組
兼容性：ie8+

2、增刪改查

方法	描述
appendChild()	把新的子節點添加到指定節點
removeChild()	刪除子節點
replaceChild()	替換子節點
insertBefore()	在指定的子節點前面插入新的子節點
createAttribute()	建立屬性節點
createElement()	建立元素節點
createTextNode()	建立文本節點

未完。。。