//值类型
let a =100
let b = a
a =200
console.log(b) //100
//引用类型
let a = {age:20}
let b = a
b.age = 21
console.log(a.age)	// 21

const a //undefined
const s = 'abc'
const n = 100
const b = true
const s = Symbol('s')

const obj = {x:100}
const arr = ['a','b','c']

const n = null //特殊引用类型,指针指向空地址
//特殊引用类型,但不用于存储数据,所以没有"拷贝,复制函数"这一说法
function fn(){}

//判断所有值类型
let a;   					typeof a //'undefined'
const str = 'abc';  		typeof str //'string'
const n = 100;    			typeof n //'number'
const b = true;   			typeof b //'boolean'
const s = Symbol('s');   	typeof s //'symbol'

//能判断函数
typeof console.log	//'function'
typeof function(){}	//'function'

//能识别引用类型(不能再继续识别)
typeof null 		//'object'
typeof ['a','b']	//'object'
typeof {x:100}		//'object'

const obj = {
	age: 20,
    name: 'xxx',
    address: {
        city: 'beijing'
    },
    arr: ['a','b','c']
}
const obj2 = obj1

obj2.address.city = "shanghai"
console.log(obj1.address.city)  //"shanghai"

//深拷贝
/***
@param {Object} obj要拷贝的对象
*/
function deepClone(obj = {}){
    if(typeof obj !== 'object' || obj == null){
        // obj是null或者不是对象和数组,直接返回
        return obj
    }
    //初始化返回结果
    let result
    if(obj instanceof Array){	//判断数组
        result = []
    }else{
        result = {}
    }
    //处理结果
    for(let key in obj){
        if(obj.hasOwnProperty(key)){// 保证key不是原型的属性
            //递归调用
            result[key] = deepClone(obj[key])
        }
    }
    
    
    return  result
}

const obj3 = deepClone(obj1)	//深拷贝
obj3.address.city = "shanghai"
console.log(obj3.address.city)  //"shanghai"
console.log(obj1.address.city)  //"beijing"

const a = 100 + 10 // 110 加法
const b = 100 + '10' // '10010'
const c = true + '10' // 'true10'
const d = 100 + parseInt('10') // 110 加法

100 == '100' 		//true
0 == ''				//true
0 == false 			// true
false == '' 		//true
false == '' 		// true
null = undefined 	//true

// 什么情况下用==
// 除了 == null之外,其他一律用 === ,例如
const obj = {x:100}
if(obj.a == null ){}
//相当于: 
//if(obj.a === null || obj.a === undefined){}

//以下是falsely变量 除此之外都是truely变量
!!0 === false
!!NaN === false
!!'' === false
!!null === false
!!undefined === false
!!false === false

//truly变量,以下if语句会执行
const a = true
if(a){
    // ...
}
const b = 100
if(b){
    // ...
}
//falsly变量 ,以下if语句不会执行
const c = ''
if(c){
    //...
}
const d = null
if(d){
    //...
}
let e
if(e){
    //...
}

console.log(10&&0) 			//0			fasly直接返回
console.log(''||'abc')		//'abc'		truly直接返回
console.log(!window.abc)	//true		

class Student{
	constructor(name ,number){
		this.name = name
		this.number = number
	}
	sayHi(){	//定义方法
		console.log(`姓名${this.name},学号${this.number}`)
	}
}
//通过new 类声明对象实例
const xiaomi = new Student('小米',100)
console.log(xiaomi.name)
console.log(xiaomi.number)
xiaomi.sayHi()

//通过new 类声明对象实例
const apple = new Student('苹果',200)
console.log(apple.name)
console.log(apple.number)
apple.sayHi()

class People {
    constructor(name){
        this.name = name
    }
    eat(){
        console.log(`${this.name} eat something`)
    }
}
//子类
class Student extends People{
    constructor(name, number){
        super(name)		//获取父类属性
        this.number = number
    }
    sayHi(){	
		console.log(`姓名${this.name},学号${this.number}`)
	}
    
}
//子类
class Teacher    extends People{
    constructor(name, number){
        super(name)		//获取父类属性
        this.major = major
    }
    teach(){	
		console.log(`${this.name}教${this.major}`)
	}
    
}
//通过new 类声明对象实例
const apple = new Student('苹果',200)
console.log(apple.name)
console.log(apple.number)
apple.sayHi()
apple.eat()
//通过new 类声明对象实例
const ai = new Student('小爱老师',前端)
console.log(ai.name)
console.log(ai.major)
ai.teach()
ai.eat()

xiaomi instanceof Student //true
xiaomi instanceof People //true
xiaomi instanceof Object //true Object是所有引入类型的父类

[] instanceof Array //true Array是[]的父类
[] instanceof Object //true

{} instanceof Object //true

//class实际上是函数,可见是语法糖
typeof People //'function'
typeof Student 
//隐式原型和显示原型
console.log(xiaomi.__proto__) //隐式原型只有在实例中
console.log(Student.prototype) //显示原型在类中
console.log(xiaomi.__proto__===Student.prototype)

xiaomi.hasOwnProperty('name') //true
xiaomi.hasOwnProperty('sayHi') //false sayHi是Student的方法 是xiaomi通过原型链去寻找的

class JQuery{
    constructor(selector){
        const result = document.querySelectorAll(selector)
        const length = result.length
        for(let i = 0;i< length;i++){
            this[i] = result[i] //获取每一个dom     
        }
        this.length = length
        this.selector = selector
    }
    get(index){
        return this[index]
    }
    each(fn){	//遍历
        for(let i = 0;i<this.length;i++){
            const elem = this[i]
            fn(elem)
        }
    }
    on(type, fn){ //监听
        return this.each(elem=>{
            elem.addEventListener(type, fn ,false)
        })
    }
    //扩展很多DOM操作
}


//html
<p>1</p>
<p>2</p>
<p>3</p>
//定义一个jquery对象
const $p = new JQuery('p')
console.log($p) 
$p.get(1)
$p.each((elem)=>console.log(elem.nodeName))
$p.on('click',()=>alert('clicked'))

//插件
JQuery.prototype.dialog = function(info){
    alert(info)
}
$p.dialog('abc')//弹出abc

//造轮子
class myJQuery extends JQuery{
    constructor(selector){
        super(selector)
    }
    //扩展自己的方法
    addClass(classname){
        
    }
    style(data){
        
    }
}

//es6块级作用域
if(true){
	let x = 100
}
console.log(x)	//会报错

//1.函数作为返回值
function create(){
    let a = 100;
    return function(){
        console.log(a)
    }
}
const fn = create()
const a = 200
fn()	//求该结果 为100

//2.函数作为返回值被返回
function print(fn){
    const a = 200
    fn()
}
const a = 100
function fn(){
    console.log(a)
}
print(fn)	//返回100

function fn1(){
    console.log(this)
}
function fn2(a,b){	//有参数的函数
    console.log(this)
    console.log(a)
    console.log(b)
}
fn1() //window
//call:改变this指向
fn1.call({x:100})	//{x:100}

//apply:改变this指向,和call基本上一致，唯一区别在于传参方式,是用数组
fn2.apply({x:100},[1,2])	//{x:100} 1 2
fn2.call({x:100},1,2)	//{x:100} 1 2

//bind:作用和call作用是相同的改变this指向,但是是返回一个新的函数
const fn2 = fn1.bind({x:200})
fn2()		//{x:200}


//对象方法中
const zhangsan = {
    name: '张三',
    sayHi(){
        //this即当前对象
        console.log(this)
    },
    wait(){
        // this===window
        setTimeout(function(){	//setTimeout调用的是window的方法
            console.log(this)
        })
    }
}

//对象方法中,箭头函数
const zhangsan1 = {
    name: '张三',
    sayHi(){
        //this即当前对象
        console.log(this)
    },
    wait(){
        // this即当前对象
        setTimeout(()=>{	//箭头函数中this永远返回上级作用域
            console.log(this)
        })
    }
}

//类中的this
class People{
    constructor(name){
        this.name = name
        this.age = 20
    }
    sayHi(){
        console.log(this)
    }
}
const zhangsan = new People('张三')
zhangsan.sayHi()	//zhangsan对象

//bind示例
function fn1(a,b,c){
    console.log('this',this)
    console.log(a,b,c)
    return 'this is fn1'
}
const fn2 = fn1.bind({x:100}, 10, 20, 30)
const res = fn2()	//返回出了{x:100}   10 20 30
console.log(res)

//手写bind
Function.prototype.bind1 = function(){
	//将参数拆解为数组
    const args = Array.prototype.slice.call(arguments)
    //获取this(数组第一项)
    const t = args.shift()
    //fn1.bind(..)中的fn1
    const self = this
    //返回一个函数
    return function(){
        return self.apply(t,args)
    }
}

//闭包隐藏数据,只提供API
function createCache(){
    const data = {}	//闭包中的数据,被隐藏,不被外界访问
    return {
        set:function(key,val){
            data[key] = val
        },
        get:function(key){
            return data[key]
        }
    }
}

const c = createCache()
c.set('a',100)
console.log(c.get('a'))

//这里只能通过set函数来修改data没有其他方法

xiaoluo.sayHi()	//执行父类中定义的sayHi方法
xiaoluo.__proto__.sayHi.call(xiaoluo)	//等效于xiaoluo.sayHi()

//异步  程序会立即执行 100 300 再等待1s后执行200 不会阻塞进程
console.log(100)
setTimeout(function(){
    console.log(200)
},1000)
console.log(300)
//同步 程序 100 弹出200 卡住了 300不会出来
console.log(100)
alert(200)
console.log(300 )

// ajax
console.log('start')
$.get('./data1.json',function(data1){
    console.log(data1)	//这里异步,等到加载完才触发,没有停下来等待
})
console.log('end')
//图片加载
console.log('start')
let img = document.createElement('img')
img.onload = function(){	//这里相当于异步,等到加载完成才触发
    console.log('loaded')
}
img.src = '/xxx.png'
console.log('end')

//setTimeout 一次性
console.log(100)
setTimeout(function(){
    console.log(200)
},1000)
console.log(300)
//setInterval  循环执行
console.log(100)
setInterval(function(){
    console.log(200)
},1000)
console.log(300)

//获取第一份数据
$.get(url1,(data1)=>{
    console.log(data1)
    //获取第二份数据
	$.get(url2,(data2)=>{
        console.log(data2)
        //获取第三份数据
        $.get(url3,(data3)=>{
        	console.log(data3)
        })
    })
})

//用promise写法来写上述功能
//定义promise的函数
function getData(url){
     return new Promise((resolve,reject)=>{
         $.ajax({
             url,
             success(data){
                 resolve(data)
             },
             error(err0){  
                 reject(err)
             }
         })
     })
 }

const url1 = '/data1.json'
const url2 = '/data2.json'
const url3 = '/data3.json'
getData(url1).then(data1=>{
    console.log(data1)
    return getData(url2)
}).then(data2=>{
    console.log(data2)
    return getData(url3)
}).then(data3=>{
    console.log(data3)
}).catch(err=>console.error(err))

const url = 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
function loadImg(src){
    return new Promise((resolve,reject)=>{
        const img = document.creatElement('img')
        img.onload = ()=>{	
            resolve(img)
        }
        img.onerror = ()=>{
            reject(new Error(`图片加载失败 ${src}`))
        }
        img.src = src
    })
}
//写法2
function loadImg(src){
    const p = new Promise((resolve,reject)=>{
        const img = document.creatElement('img')
        img.onload = ()=>{	
            resolve(img)
        }
        img.onerror = ()=>{
            reject(new Error(`图片加载失败 ${src}`))
        }
        img.src = src
    })
    return p  //返回promise对象
}
loadImg(url).then(img=>{
    console.log(img.width)
    return img
}).then(img=>{
    console.log(img.height)
}).catch(ex=>console.error(ex))
const url2 = 'https://news-bos.cdn.bcebos.com/mvideo/log-news.png'
loadImg(url).then(img1=>{
    console.log(img1.width)
    return img1		//返回普通对象
}).then(img1=>{
    console.log(img1.height)
    return loadImg(url2)	//promise实例 返回的是resolve(img)中的img
}).then(img2=>{
    console.log(img2.height)
}).catch(err=>console.error(err))

//setTimeout 笔试题 是按什么顺序打印
console.log(1)
setTimeout(function(){
    console.log(2)
},1000)
console.log(3)
setTimeout(function(){
    console.log(4)
},0)
console.log(5)
//答案
1 3 5 4 2

//第一题
Promise.resolve().then(()=>{
	console.log(1)
}).catch(()=>{
	console.log(2)
}).then(()=>{
	console.log(3)
})
//第二题
Promise.resolve().then(()=>{
	console.log(1) 
    throw new Error('error1')
}).catch(()=>{
	console.log(2)
}).then(()=>{
	console.log(3)
})
//第三题
Promise.resolve().then(()=>{
	console.log(1) 
    throw new Error('error1')
}).catch(()=>{
	console.log(2)
}).catch(()=>{
	console.log(3)
})

async function fn(){
    return 100
}
(async function fn(){
    const a = fn()	//??
    const b = await fn() //??
})


(async function(){
 	console.log('start')
    const a = await 100
    console.log('a',a)
    const b = await Promise.resolve(200)
    console.log('a',a)
    const c = await Promise.reject(300)
    console.log('c',c)
})()//执行完毕打印哪些内容

console.log(100)
setTimeout(()=>{
	console.log(200)
})
Promise.resolve().then(()=>{
    console.log(300)
})
console.log(400)

async function async1(){
    console.log('async1 start')
	await async2()
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}
console.log('script start')
setTimeout(function (){
    console.log('setTimeout')
},0)
async1()

new Promise(function (resolve){
    console.log('promise1')
    resolve()
}).then(function(){
    console.log('promise2')
})

console.log('script end')

console.log('Hi')	//同步代码
setTimeout(function cb1(){
    console.log('cb1') //异步代码
},5000)
console.log('Bye')	//同步代码

//Hi Bye cb1

console.log('Hi')	//同步代码
setTimeout(function cb1(){
    console.log('cb1') //异步代码
},5000)
console.log('Bye')	//同步代码

//Hi Bye cb1

const div1 = document.getElementById('div1')
console.log('div1', div1)

const divList = document.getElementsByTagName('div') // 集合
console.log('divList.length', divList.length)
console.log('divList[1]', divList[1])

const containerList = document.getElementsByClassName('container') // 集合
console.log('containerList.length', containerList.length)
console.log('containerList[1]', containerList[1])

const pList = document.querySelectorAll('p')
console.log('pList', pList)

const pList = document.querySelectorAll('p')
const p1 = pList[0]

// property 形式
p1.style.width = '100px'
console.log( p1.style.width )
p1.className = 'red'
console.log( p1.className )
console.log(p1.nodeName)
console.log(p1.nodeType) // 1

// attribute
p1.setAttribute('data-name', 'imooc')
console.log( p1.getAttribute('data-name') )
p1.setAttribute('style', 'font-size: 50px;')
console.log( p1.getAttribute('style') )

// 新建节点
const newP = document.createElement('p')
newP.innerHTML = 'this is newP'
// 插入节点
div1.appendChild(newP)
// 移动节点	(针对已有节点p1,则是移动节点)
const p1 = document.getElementById('p1')
div2.appendChild(p1)

// 获取父元素
console.log( p1.parentNode )

// 获取子元素列表
const div1ChildNodes = div1.childNodes
console.log( div1.childNodes )	//这里包含了p标签元素 也包含了文本元素,需要排除文件元素
//Array.prototype.slice.call(div1.childNodes)是将div1.childNodes变成数组类型
const div1ChildNodesP = Array.prototype.slice.call(div1.childNodes).filter(child => {
    if (child.nodeType === 1) {	//nodeType为1是p标签
        return true
    }
     return false
})
console.log('div1ChildNodesP', div1ChildNodesP)

div1.removeChild( div1ChildNodesP[0] )

//不缓存dom查询结果
for(let = 0; i < document.getElementsByTagName('p').length; i++){
    //每次循环,都会计算length,频繁进行dom查询
}
//缓存dom查询结果
const pList = document.getElementsByTagName('p')
const length = pList.length;
for(let i = 0; i< length; i++){
    //缓存length,只进行一次dom查询
}

const list = document.getElementById('list')

// 创建一个文档片段，此时还没有插入到 DOM 结构中
const frag = document.createDocumentFragment()

for (let i  = 0; i < 20; i++) {
    const li = document.createElement('li')
    li.innerHTML = `List item ${i}`

    // 先插入文档片段中
    frag.appendChild(li)
}

// 都完成之后，再统一插入到 DOM 结构中
list.appendChild(frag)

console.log(list)

const btn = document.getElementById('btn1')
btn.addEventListener('click',event=>{
    console.log('clicked')
})

//通用事件绑定
function bindEvent(elem, type, fn){
    elem.addEventListener(type, fn)
}
const a = document.getElementById('link1')
bindEvent(a, 'click', e=>{
    e.preventDefault() //阻止默认行为
    alert('clicked')
})

function bindEvent(elem, type, fn){
    elem.addEventListener(type, fn)
}
const a = document.getElementById('link1')
bindEvent(a, 'click', e=>{
	console.log(e.target)	//打印出a标签的dom元素 
    e.preventDefault() //阻止默认行为
})

function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector
        selector = null
    }
    elem.addEventListener(type, event => {
        const target = event.target
        if (selector) {
            // 代理绑定
            if (target.matches(selector)) {	//matches是dom元素是否符合于一个css选择器
                fn.call(target, event) //call.(thisOject, arg1 ,arg2 ...) event是参数
            }
        } else {
            // 普通绑定
            fn.call(target, event)
        }
    })
}

// 普通绑定
const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', function (event) {
    // console.log(event.target) // 获取触发的元素
    event.preventDefault() // 阻止默认行为
    alert(this.innerHTML)
})

// 代理绑定
const div3 = document.getElementById('div3')
bindEvent(div3, 'click', 'a', function (event) {	//注意这个不能用箭头函数,因为用箭头函数时this是window
    event.preventDefault()
    alert(this.innerHTML)
})
bindEvent(div3, 'click', 'a', (event)=> {	//如果要使用箭头函数就不要用this,用参数
    event.preventDefault()
    alert(event.target.innerHTML)
})

//get请求
const xhr = new XMLHttpRequest()
xhr.open("GET","/data/test.json",false)	// /data/test.json是请求地址 false是异步请求
xhr.onreadystatechange = function(){	//监听返回结果
    //这里的函数异步执行,可参考之前js基础中的异步模块
    if(xhr.readyState === 4){
        if(xhr.status === 200){
            alert(xhr.responseText)
            console.log(
            	JSON.parse(xhr.responseText)	//将字符串转换为json对象
            )
        }else{
            console.log("其他情况")
        }
    }
}
xhr.send(null)	//发送数据,因为此时是get请求无需发送数据

//post请求
const xhr = new XMLHttpRequest()
xhr.open("POST","/login",true)	// /data/test.json是请求地址 true是异步请求
xhr.onreadystatechange = function(){	//监听返回结果
    //这里的函数异步执行,可参考之前js基础中的异步模块
    if(xhr.readyState === 4){
        if(xhr.status === 200){
            alert(xhr.responseText)
            console.log(
            	JSON.parse(xhr.responseText)	//将字符串转换为json对象
            )
        }else if(xhr.status === 404){
            console.log("404 not found")
        }else{
            console.log("其他情况")
        }
    }
}
const postData = {
    userName: 'zhangsan',
    password: 'xxxx'
}
xhr.send(JSON.stringify(postData))	//将对象转为字符串 发送数据

$.ajax({
    url: 'http://localhost:8002/jsonp.js',
    dataType: 'jsonp',
    jsonpCallback: 'callback',
    success: function(data){
        console.log(data)
    }
})

//第二个参数填写允许跨域的域名称,不建议写 '*'
response.setHeader("Access-Control-Allow-Origin",'http://localhost:8011');
response.setHeader("Access-Control-Allow-Headers",'X-Requested-With');
response.setHeader("Access-Control-Allow-Methods",'PUT,POST,GET,DELETE,OPTIONS');
//接受跨域的cookie
response.setHeader("Access-Control-Allow-Credentials","true");

function ajax(url){
	const p = new Promise((resolve,reject)=>{
        const xhr = new XMLHttpRequest()
        xhr.open("GET",url,true)	// /data/test.json是请求地址 true是异步请求
		xhr.onreadystatechange = function(){	//监听返回结果
   		 //这里的函数异步执行,可参考之前js基础中的异步模块
  		  if(xhr.readyState === 4){
        		if(xhr.status === 200){
            	alert(xhr.responseText)
            	console.log(JSON.parse(xhr.responseText))	//将字符串转换为json对象
        	}else if(xhr.status === 404){console.log("404 not found")
        	}else{console.log("其他情况")
     		}
    	}//end function
         xhr.send(null);	//必须要写,不然没有请求
    })	//end promise
    return p 
}
//ajax使用                       
const url = '/data/test.json';
ajax(url)
.then(res=>console.log(res))
.catch(err=>console.log(err))
    

   $(function(){
        //请求参数
        var list = {};
        //
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "http://127.0.0.1/admin/list/",
            //数据，json字符串
            data : JSON.stringify(list),
            //请求成功
            success : function(result) {
                console.log(result);
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    });
//$(function(){ }是什么意思

$(function(){
// do something
});
等价于
$(document).ready(function(){
//do something
})
等价于
$().ready(function(){
//do something
})
这个就是jq ready()的方法就是Dom Ready，他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。
一般情况先一个页面响应加载的顺序是：域名解析-加载html-加载js和css-加载图片等其他信息。

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

//在控制台上输入
console.log(document.cookie)  //返回cookie字符串 ""
document.cookie = 'a=100';
document.cookie = 'b=200';
document.cookie = 'a=300';//必须一个一个加cookie,否则会自动截取
console.log(document.cookie) //"b=200; a=300"