[JavaScript知识库]学习笔记-javascript高级

javascript

解析和执行过程

• 解析阶段

// 解析阶段
// a:undefined
// b:未定义
// c:指向函数
// d:undefined
var a = 1;
b = 2
function c(){
    console.log('c')
}

var d = function(){
    console.log('d')
}

console.log(a)// 函数
function a(){}
var a = 1
console.log(a)// 1


b() // 2
function b(){
    console.log("1")
}

function b(){
    console.log("2")
}

• 执行阶段

console.log(a)// undefined
console.log(b)// 未定义
console.log(c)// 函数
console.log(d)// undefined
var a = 1;
console.log(a)// 1
b = 2
console.log(b)// 2
function c(){
    console.log('c')
}

var d = function(){
    console.log('d')
}
console.log(d)// 函数

作用域

// 无论在哪里调用，都是取创建时的作用域
let  = 10
function fn(){
    console.log(x)
}
function show(){
    let x = 20
    (function(){
        fn()// 10
    })()
}

show()

变量提升

var foo = 111
function hoistVariable(){
    // 相当于
    /*
        var foo
        if(!foo){
            foo = 5
        }
        console.log(foo)
    */

    if(!foo){
        var foo = 5
    }
    // 该作用域内存在声明foo,无论在什么地方调用，只会在该作用域内查找
    console.log(foo)// 5
}
hoistVariable() // 5

var foo = 111
function hoistVariable(){
    // 相当于
    /*
        var foo
        console.log(foo)
        foo = foo || 5
        console.log(foo)
    */
    console.log(foo)
    var foo = foo||5 // 函数默认值赋值
    console.log(foo) // 5
}
hoistVariable()

函数提升

foo() // 在函数声明前调用， 函数提升
function foo(){
    
}

foo() // 函数表达式不能提升
let foo = function(){
    
}

String

反转

// 字符串反转
function reverseString(str){
    //str.split('')// 将字符串变成数组
    //str.split('').reverse()// 数组反转
    return str.split('').reverse().join('')// 数组合并成字符串
}

var str = 'abcdef'
reverseString(str)

// 栈
function Stack(){
    this.data = []
    this.top = 0
}

Stack.prototype = {
    // 入栈
    push:function(element){
        this.data[this.top++] = element
    },
    // 出栈
    pop:function(){
        return this.data[--this.pop]
    },
    
    // 返回栈内元素长度
    length: function(){
        return this.top
    },
}

function reverseString(str){
    let stack = new Stack()
    let arr = str.split("")
    // 入栈
    for(let i=0;i<arr.length;i++){
        stack.push(arr[i])
    }
    let result = ''
    // 出栈
    for(let i=0;i<arr.length;i++){
        result += stack.pop()
    }
    return result
}

let str = 'abcde'
let result = reverseString(str)

// 递归
function reverseString(str,pos,out){
    if(pos<0){
        return out
    }
    
    out += str.charAt(pos--)
    return reverseString(str,pos,out)
}

let str = 'abcdefg'
let result = ''
result = reverseString(str,str.length,'')

查询出现次数最多字符

function getMax(str){
    let json = {}
    for(let i=0;i<str.length;i++){
        let ch = str.charAt(i)
        if(!json[ch]){
            json[ch] = 1
        }else{
            json[ch] = json[ch]+1
        }
    }
    console.log(json)
    let maxChar = ''
    let maxNum = 0
    
    for(let key in json){
        if(json[key]>maxNum){
            maxNum = json[key]
            maxChar = key
        }
    }
    return maxChar
}


let str  = 'xsadasxasdsad'
getMax(x)

数组

判断为空

let obj = {}
// 判断对象是否为空
function isEmpty(obj){
    for(let key in obj){
        if(obj.hasOwnProperty(key)){
            return false
        }
    }
    return true
}

let arr = []
// 判断数组是否为空
function isEmpty(arr){
    if(arr.length===0){
        return true
    }else{
        return false
    }
}

// 判断字符串是否为空
function isEmpty(str){
    if(str===''||str.trim().length===0){
        return true
    }else{
        return false
    }
}

instanceof

let arr = [] 
typeof arr // object
let obj = {}
typeof obj // object

arr instanceof Array // true
obj instanceof Object // true

function getDataType(data){
    if(data instanceof Array){
        return 'Array'
    }else if(data instanceof Object){
        return 'Object'
    }else{
        return 'Data not is Array or Object'
    }
}

filter

let arr = [1,2,3,4,5,6,7,8,9]
function filterFun(x){
    return x%2
}
arr.filter(filterFun)

reduce累加器

let arr = [1,2,3,4,5,6,7,8,9]
arr.reduce(function(accumulator,currentValue){
    return accumulator+currentValue
})

自定义获取最小值&最大值

let arr = [1,2,3,4,5,6,7,8,9]
Array.prototype.min = function(){
    let min = this[0]
    let len = this.length
    for(let i=0;i<len;i++){
        if(this[i]<min){
            min = this[i]
        }
    }
    return min
}
arr.min()

Array.prototype.max = function(){
    let max = this[0]
    let len = this.length
    for(let i=0;i<len;i++){
        if(this[i]>max){
            max = this[i]
        }
    }
    return max
}

Array.prototype.min = function(){
    return Math.min.apply(Math,this)
}

Array.prototype.max = funtion(){
    return Math.max.apply(Math,this)
}

forEach

let arr = []

arr.forEach(function(element,index,array){
    
})

数组去重

let arr = [1,2,2,3,4,4,5,6,7,7,8,8,9,9]
function arrayRepeat(arr){
    let result = [arr[0]]
    arr.sort(function(a,b){
        return a-b
    })
    
    for(let i=0;i<arr.length;i++){
        if(arr[i]!=result[result.length-1]){
            result.push(arr[i])
        }
    }
    return result
}

Date

• javascript库
  • Moment.js
  • date.js

函数

let add = new Function('num1','num2','return num1+num2')
add(1,2)

// 代码模块化
/*
* person 
* getName
* setName newName 'String'
*/
// let name  = person.getName('xxx')
var Person = (function(){
    let _name = ''
    return {
        setName:function(){
            return _name
        },
        setName:function(newName){
            _name = newName
        }
    }
}())
Person.setName('xxx')
Person.getName()

函数调用

let obj = {
    name: 'xxx',
    getNmae:function(){
        return name
    },
    setName:function(name){
        this.name = name
        return this
    }
}

obj.getName()
obj['getName']()
// 链式调用 需要返回this
obj.setNmae('xxx').getNmae()

// 构造器
function Person(name,age,sex){
    this.name = name
    this.age = age
    this.sex = sex
}
Person.prototype.getName = function(){
    return this.name
}
Person.prototype.setName = function(name){
    this.name = name
}

let p = new Pserson('xxx')

// call apply
function sum(num1,num2){
    return num1 + num2
}

let Perosn = {}

sum.call(Person,1,2)
sum.apply(Person,[1,2])

匿名函数

(function(){
    
})()

arguments

function test(){
    console.log(arguments)
}

test(1,2,3)

function aaa(){
    console.log(arguments.callee === aaa)// true
    a()
    function a(){
        console.log(arguments.callee === a) // true
    }
}
// 可以使用callee递归
function aa(){
    return function(n){
        if(n<=1){
            return 1
        }
        return n * arguments.callee(n-1)
    }
}

// 模拟函数重载
function sum(){
    let arr = Array.prototype.slice.call(arguments)
    return arr.reduce(function(pre,cur){
        return pre+cur
    },0)
}

sum(1,2)
sum(1,2,3)
sum(1,2,3,4)

闭包

function test(){
    let max = 10
    return function bar(x){
        if(x>10){
            console.log(x)
        }
    }
}

let f = test()
f(11)

let cacheMemory = (function(){
    // 定义一个缓存容器
    let cache = {}
    return {
        set : function(id){
            // 如果在内存中就返回
            if(id in cache){
                return cache[id]
            }
            // 如果没有就查询
            let result = fn(id)
            cache[id] = result
            return cache[id]
        }
    }
})()

function fn(id){
    // 查询操作
    return  'xx'
}

// 作用域链
var name = 'other'
let obj = {
    name:'inner',
    method:function(){
        _this = this
        return function(){
            return _this.name
        }
    }
}

this

• 永远指向函数调用者

function Person(name){
    this.name = name
}
let p = new Person('xxx')
console.log(p.name)

var value = 10
var obj = {
    value:100,
    method:function(){
        var foo = function(){
            console.log(this.value) // 10
        }
        foo() // window.foo()
        console.log(this.value) // 100
    }
}

obj.method()

var number = 10
function Person(){
    number = 20
    this.number = 30
    console.log(number)  // 20
}
Person.prototype.getName = function(){
    return this.number // 30
}

var p = new Person()
console.log(p.number)  // 30

重新绑定对象

var value = 10
var obj = {
    value:20
}

var method = function(){
    console.log(this.value) // 10
}
method()// 10
method().call(obj) // 20
method().apply(obj)// 20
var newMethod = method.bind(obj)
newMethod() // 20

闭包中的this

var user = {
    sport:'xxxxx',
    data:[
        {name:'a',age:11},
        {name:'b',age:11},
        {name:'c',age:11},
    ],
    clickHandler:function(){
        this.data.forEach(person){
            // 闭包内部this无法访问外部
            // 内部this不指向外部，指向window
            console.log(this) // window
            console.log(person.name+":"+this.sprot) // this.sport undefined
        }
    }
}

user.clickHandler()

var user = {
    sport:'xxxxx',
    data:[
        {name:'a',age:11},
        {name:'b',age:11},
        {name:'c',age:11},
    ],
    clickHandler:function(){
        var _this = this 
        this.data.forEach(person){
            console.log(_this) 
            console.log(person.name+":"+_this.sprot) 
        }
    }
}

call&apply&bind

function add(num1,num2){
    return num1 + num2
}

function myAddCall(x,y){
    // 绑定add函数
    return add.call(this,x,y)
}
function myAddApply(x,y){
    // 绑定add函数
    return add.apply(this,[x,y])
}

function myAddBind(x,y){
    // 绑定add函数
    var bindfn =  add.bind(this,x,y)
    return bindfn()
}

调用匿名函数

var animals = [
    {species:'xx',name:'xxx'},
    {species:'xx',name:'xxx'}
]

for(var i=0;i<animals.length;i++){
    (function(i){
        this.print = function(){
            console.log(this.species)
        }
        this.print()
    }).call(animals[i],i)
}

bind配合setTimeout

function LateBloomer(){
    this.petalCount = Math.call(Math.reandom()*12)+1
}

LateBloomer.prototype.bloom = function(){
    window.setTimeout(this.doclare.bind(this),1000)
}
LateBloomer.prototype.doclare = function(){
    return this.petalCount
}

var s = new LateBloomer()
s.bloom()

对象属性

var person = {}
Object.definePrperty(person,"name",{
    writable:false,
    value:'xxxxx'
})

person.name// 不可修改

私有属性

let book = {
    _year:2017, // 只是约定，不限制访问
    edition: 1
}

对象

对象创建

// 构造对象
let person1 = new Object()
person1.name = 'xxx'

let person2 = {
    name:'xxx'
}

// 工厂方法
function createPerson(name,age,address){
    let obj = new Object()
    obj.name = name
    obj.age = age
    obj.address = address
    obj.getName = function(){
        return this.name
    }
    return obj
}

// 构造函数
function Person(name,age,address){
    this.name = name
    this.age = age
    this.address = address
    this.getName = function(){
        return this.name
    }
}

// 原型对象模式
function Person(name,age,address){
    this.name = name
    this.age = age
    this.address = address
}

Person.prototype.getName = function(){
    return this.name
}

// 原型对象模式初始化
// 提高效率
function Person(name,age,address){
    this.name = name
    this.age = age
    this.address = address
    if(typeof Person._initialized === 'undefined'){
        Person.prototype.getName = function(){
            return this.name
        }
        Person._initialized = true
    }
}

对象克隆

// 简单引用复制
let origin = {}
let obj = origin

// 浅克隆1
function showClone(origin){
    let result = {}
    for(let key in origin){
       if(origin.hasOwnProperty(key)){
           result[key] = origin[key]
       } 
    }
    return result
}
// 浅克隆2
let origin = {}
let result = Object.assign({},origin)

// 深克隆
// 序列化反序列化
let origin = {}
let result = JSON.pares(JSON.stringify(origin))
// 有缺陷，不能克隆特殊对象如RegExp
// 可以自定义深克隆
// 可以直接使用jquery克隆函数

原型

// 重写原型对象
function Person(){}
Person.prototype = {
    // 没有constructor，则原型链破裂，指向Object 
    constructor:Person,
    name:'xx',
    age:29,
    sayName:function(){
        return this.name
    }
}

原型链

function Person(){
    
}

let person = new Person()
person.__proto__ === Person.prototype // true
Person.prototype.__proto__ === Object.prototype
Object.prototype.__proto__ === null

Function.prototype.a = 'a'
Object.prototype.b = 'b'
function Person(){}

let p = new Person()
p.a // undefined
p.b // b

hasOwnProperty

function Person(name){
    this.name = name
}
let person = new Person('ccc')
Person.prototype.age = 12

person.hasOwnProperty('name')// true
person.hasOwnProperty('age')// false

继承

原型链继承

function Animal(name){
    this.type = 'animal'
    this.name = name || 'animal'  // 参数默认复制，没有name时就是animal
    
    this.sleep = function(){
        console.log(this.name+'is sleeping')
    }
}

// 原型链
Animal.prototype.age = 5
Animal.prototype.eat = function(food){
    console.log(this.name+"is eating "+food)
}

function Cat(name){
    this.name = name
}

// 原型链继承
Cat.prototype = new Animal()
// 将Cat的构造函数指向自身
Cat.prototype.constructor = Cat
let cat = new Cat('xxx')
cat.type // animal
cat.name // xxx
cat.sleep() // xxx is sleeping
cat.age // 5

构造函数继承

function Animal(name){
    this.name = name
    this.age = 15
    this.sleep = function(){
        console.log(this.name+'is sleeping')
    }
}

Animal.prototype.eat = function(food){
    console.log(this.name+"is eating "+food)
}

function Cat(name){
    // 不能调用父类原型链上的函数 
    Animal.call(this)
    this.name = name
}

复制继承

function Animal(name){
    this.name = name
    this.age = 15
    this.sleep = function(){
        console.log(this.name+'is sleeping')
    }
}

Animal.prototype.eat = function(food){
    console.log(this.name+"is eating "+food)
}


function  Cat(name){
    let animal = new Animal(name)
    for(let key in animal){
        if(animal.hasOwnProperty(key)){
            this[key] = animal[key]
        }else{
            Cat.prototype.key = animal[key]
        }
            
    }
}

组合继承

function Animal(name){
    this.name = name
    this.age = 15
    this.sleep = function(){
        console.log(this.name+'is sleeping')
    }
}

Animal.prototype.eat = function(food){
    console.log(this.name+"is eating "+food)
}

function Cat(name){
    Animal.call(this,name)
}

Cat.prototype = new Animal()
Cat.prototype.constructor = Cat

//改进
function Animal(name){
    this.name = name
    this.age = 15
    this.sleep = function(){
        console.log(this.name+'is sleeping')
    }
}

Animal.prototype.eat = function(food){
    console.log(this.name+"is eating "+food)
}

function Cat(name){
    Animal.call(this,name)
}

(function(){
    let Super = function(){}
    Super.prototype = Animal.prototype
    Cat.prototype = new Super()
    Cat.prototype.constructor = Cat
})()

事件

• 事件捕获
• 事件处理
• 事件冒泡

事件级别

// DOM0级
let ad = document.qquerySelector('#ad')
ad.onclick = function(){
    console.log(1)
}

// DOM2级
ad.addEventListener('click',function(){
    console.log(2)
})

// DOM3级
// 浏览器是否支持dom3级事件
//document.implementation.hasFeature('CustomEvents','3.0')
var customEvent;
// 创建自定义事件
(function(){
    if(document.implementation.hasFeature('CustomEvents','3.0')){
        var detailData = {name:'xxx'}
        customEvent = document.createEvent('customEvent')
        customEvent.initCustomEvent('myEvent',true,false,detailData)
    }
})()

ad.addEventListener('myEvent',function(e){
    console.log(e.detail)
})
ad.addEventListener('click',function(){
    // 触发customEvent事件
    ad.disatchEvent(customEvent)
})

阻止冒泡

ad.addEventListener('click',function(event){
    console.log('xxx')
    // 阻止冒泡
    event.stopPropagation()
    // 阻止事件继续
    // event.stopImmediatePropagation()
})

阻止默认行为

• event.preventDefault()

事件委托

// 通过事件冒泡，父元素处理并匹配对应的子元素
// 子元素的点击事件及委托到父类上处理
let oUl = document.querySelector('ul')
oUl.addEventListener('click',function(event){
    let target = event.target
    console.log(target.nodeName)
    if(targe.nodeName.toLowerCase === 'li'){
        console.log(target.innerText)
    }
    
})

浏览器

• 重排
• 重绘

ajax

• XMLHttpRequest

// 创建XMLHttpRequest
// 可以封装起来
function createXMLHttp(){
    let xmlHttp = new XMLHttpRequest()
    return xmlHttp
}
let data = {xx:'xx',aa:'aa'}
// 序列化
data= JSON.stringify(data)

// 需要传递的数据
let xhr = createXMLHttp()
// 建立连接
xhr.open('post','/xx/xx',true)
// 设置请求头
xhr.setRequestHeader('Content-type','application/json;charset=UTF-8')
// 发送
xhr.send(data)
// 处理返回数据
xhr.onreadystatechange = function(){
    if(xhr.readyState ==4 && xhr.status == 200){
        // 发送成功
        console.log(xhr.responseText)
    }
}

ajax进度事件

// 创建XMLHttpRequest
// 可以封装起来
function createXMLHttp(){
    let xmlHttp = new XMLHttpRequest()
    return xmlHttp
}
let data = {xx:'xx',aa:'aa'}
// 序列化
data= JSON.stringify(data)

// 需要传递的数据
let xhr = createXMLHttp()
// 设置onloadStart事件监听
xhr.onloadStart = function(event){
    console.log('onloadStart事件--开始接受数据')
}
// 设置onerror事件
xhr.onerror = function(event){
    console.log('onerror事件')
}
// 设置ontimeout事件
xhr.ontimeout = function(event){
    console.log('ontimeout事件')
}
// 设置onload事件
xhr.onload = function(event){
    let status = xhr.status
    //let status = event.target.status
    if(status>=200 && status<300 || status === 304){
        console.log('onload事件--数据接收完成')
    }
}
// 设置onloadend事件
xhr.onloadend = function(event){
    console.log('onloadend事件')
}

// 建立连接
xhr.open('post','/xx/xx',true)
// 设置请求头
xhr.setRequestHeader('Content-type','application/json;charset=UTF-8')
// 发送
xhr.send(data)

JSON序列化

• JOSN.stringify()
  • 序列化
• JSON.parse()
  • 反序列化

跨域

• JSONP
• CORS