js 基础 - javascript | jluyeyu = blog

# js 基础

# 1. this 的指代

全局环境里的 this->windows
全局函数里的 this->windows
方法中的 this-> 调用该方法的对象
事件里的 this-> 触发该事件的 DOM 对象
构造函数中的 this->new 创建的对象
new 关键字做了什么：new 创建对象，将构造函数的 this, 指向创建出来的对象。
箭头函数中 this-> 指向箭头函数上下文的 this

# 2. call、apply、bind 的基本用法

他们三个都是用于修改函数this指向的

但是参数和用法有些区别

fun.call (A, 参数 1，参数 2)

fun.apply (A,[参数 1，参数 2])；

bind 和 call 类似，但是和上面两个的区别是，它改变 this 之后，不会立刻执行，而是返回一个函数，可以多次调用。

应用场景：

防抖、节流的编写
实现多继承等

# 3. 同步和异步

同步：代码顺序执行。

异步：代码的执行顺序可能不是顺序的。

# 3.1 js 为什么是单线程的。

如果是多线程的话，在操作dom的时候就需要相关的措施来防止同时操作。

# 3.2 事件循环、执行顺序相关

同步
process.nexttick()
微任务 (promise.then () 方法)
宏任务 (计时器，ajax，读取文件)。
setImmediate()

# 3.3 promise 和 async

promise 需要用 resolve 函数传出来，传出来的作为 then 的形参，才会执行 then

	let p=new Promise((resolve)=>{
	resolve("hello world")
	})
	p.then((data)=>{
	console.log(data)
	})

async 函数的返回一个 promise 对象。其 return=> then 的参数，也可以用 await 获取到

	function fun(){
	return new Promise((resolve)=>{
	resolve(1);
	})
	}

等价于

	async function fun(){
	return 1;
	}

await 可以跟上 promise 对象，获取到 resolve 的值

	let p=new Promise((resolve)=>{
	resolve(1);
	});
	async function fun(){
	let a=await p;
	console.log(a); //1
	}

# 4. 对象属性描述

configurable 可配置 (是否可 delete)
enumerable 可枚举（for in 能否遍历到）
value
writeable 是否可更改

# 5. 闭包

方便模块化，模块内仅能访问内部函数返回的。，并根据它使用、操作内部的函数方法等。

内部函数没执行完成，变量不会销毁

# 对象拷贝相关

# 5.1 javaScript 的内存结构

(栈内存) 原始类型：数值，字符串，布尔、null、undefined

(堆内存) 引用类型：对象

# 5.2 浅拷贝，通过键值对拷贝

	function copy(old){
	let new={};
	for i in old{
	new[i]=old[i];
	}
	return new;
	}

# 5.3 深拷贝

方法 1

	function copy(old){
	let new={};
	for i in old{
	if(obj[i] instance of Object){
	new[i]=copy(obj[i]);
	}else{
	new[i]=old[i];
	}
	}
	return new;
	}

方法 2，json

	let old_json=JSON.stringify();
	let new=JSON.parse(old_json);

# 5. 防抖

防抖是防止用户多次触发事件，只保留最后一次触发事件，做法是通过计时器来实现的

	function debounce=(fn,delay){
	let t=null;
	if(t!=null){
	clearTimeout(t);
	}
	t=setTimeout(()=>{
	fn.call(this);
	},delay)
	}

# 6. 节流

节流是短时间内多次触发事件，只保留第一次时间，也是通过计时器实现的

	function throttle=(fn,delay){
	let flag=true;
	if(flag){
	setTimeout(()=>{
	fn.call(this);
	flag=true;
	},delay)
	}
	flag=false;
	}

javascript