数据类型
js中的数据类型有两类：值类型和引用类型
值类型：number、string、boolean、Symbol、undefined
引用类型：null、数组、对象
使用typeof能用来干什么
- 判断是否是值类型
typeof obj !== 'object' || typeof obj == null
- 判断是否是函数
typeof obj === 'function'
- 判断是否是引用类型
typeof obj === 'object'
值类型和引用类型的区别
每声明一个值类型的变量，就会去开辟一个新的内存空间去存储变量的值
// 值类型
let a = 10; // 在内存中开辟一个空间给变量 a，a的地址为 100，值为 10
let b = a; // 在内存中开辟一个空间给变量 b，b 的地址为 200，并且把 a 的值赋值给 b，为10
a = 20; // 查找 a 的地址，并把 a 的值更改为20
console.log(a); // 20，查找 a 的地址 100，然后找到对应的值 20
console.log(b); // 10，查找 b 的地址 200，然后找到对应的值10
而引用类型的值，则是放在堆中的，在复制的时候引用的状态，
// 引用类型
// 在内存中开辟一个空间给变量 obj1，
// 然后在堆中创建一个对象 { age: 20 }, 并把堆中的这个对象的内存地址 600 赋值给 obj1
let obj1 = { age: 20 };
// 在内存中开辟一个空间给变量 obj2，然后把 obj1 的值 地址600 赋值给 obj2，
// 而 obj1 存的是 对象 { age: 20 } 的地址，故 obj2 存的就是该对象的地址 600
let obj2 = obj1;
// obj1存的是地址，故 obj1.age = 30 修改的是 地址 600 的内容，修改为30
obj1.age = 30;
// 故打印出来的 obj1.age 和 obj2.age 都是 30
console.log(obj1.age); // 30
console.log(obj2.age); // 30
之所有引用类型是因为担心性能的问题，若一个对象的特别大，那么如果按照值类型的话，那么就特别占用内存。
类型转换
- 字符串拼接
- ==
- if 语句和逻辑运算
字符串拼接
10 + '10' // 1010
10 + false // 10false
双等==
除了 == null 之外、其它一律使用 ===。
a == null 相当于 a === undefined || a === null
if语句和逻辑运算
在 js 中的 if 语句中的条件语句的值实际上是 truely 和 falsely，这和c语言可能有点不一样。
以下都是 falsely 变量，除此之外都是 truely 变量
!!0 === false
!!NaN === false
!!'' === false
!!null === false
!!undefined === false
!!false === false
深拷贝
因为引用的类型的存在，我们有时候需要赋值的不对原来的对象造成影响，那么我们就需要拷贝该引用对象。
function deepClone(obj) {
// 判断是否是值类型以是否是null
if (typeof obj !== 'object' || typeof obj == null) {
// 只有当 obj 是值类型或者 obj 为 null 或者 undefined 时，才会直接返回
return obj;
}
// 初始化返回值类型
let result;
if (obj instanceof Array) {
result = []
} else {
result = {}
}
// 递归遍历设置值
for (let key in obj) {
// 判断是否是自身的属性
if (obj.hasOwnProperty(key)) {
// 若是自身的属性就去赋值，并通知递归判断是否需要再次拷贝
result[key] = deepClone(obj[key])
}
}
return result;
}
// 测试
let obj1 = { age: 20 };
let obj2 = deepClone(obj1);
obj1.age = 30;
console.log(obj1.age); // 20
console.log(obj2.age); // 30
如何准确判断一个变量是不是数组
instanceof
手写一个简易的jQuery，考虑插件和扩展性
class jQuery {
constructor(selector) {
const els = document.querySelectorAll(selector);
const length = els.length;
this.length = length;
this.selector = selector;
for (let i = 0; i < length; i++) {
this[i] = els[i]
}
}
html(val) {}
css() {}
}
// 插件
jQuery.prototype.style = function() {}
// 扩展性
class myJquery extends jQuery {
constructor(selector) {
super(selector)
}
on() {}
each() {}
}
原型
原型关系
每个构造函数都有一个现实原型prototype，每个实例都有一个隐式原型__proto__，每个实例的隐式原型指向其构造函数的显示原型。
基于原型的执行规则
获取属性或执行方法时，先在自身身上查找，倘若找不到就去隐式原型__proto__上去寻找，层层向上，直到null为止
class People {
constructor(){}
eat(){}
}
class Student extends People{
constructor(name) {
super();
this.name = name;
}
study(){}
}
const stu = new Student('George');
// stu 自身上有study方法
stu.study();
// stu 自身上没有eat方法，故去 stu 的隐式原型__proto__上去寻找，
// stu.__proto__指向People.prototype，而People.prototype上有 eat 方法
stu.eat();
// stu 自身上没有toString方法，故去stu的隐式原型__proto__上去寻找,
// stu.__proto__指向People.prototype，而People.prototype上没有toString方法，
// 则继续去People.prototype.__proto__上去寻找，
// 而People.prototype.__proto__指向的是Object.prototype
// Object.prototype有toString方法，则找到
stu.toString();
作用域
在js中，作用域一共有三种
- 全局
- 函数
- 块级
自由变量
- 一个变量在当前作用域没有被定义，但被使用
- 若当前作用域找不到该变量则向上层作用域寻找，层层向上，直到找到为止
- 若全局作用域也没找到，则操作
xxx is not defined
ps：自由变量的查找是在函数定义的作用域向上找，而不是执行的作用域
// 案例1
function foo() {
let a = 2;
function bar() {
console.log(a); // 2
}
bar();
}
foo();
// 案例2
function foo() {
let a = 2;
bar();
}
let a = 10;
function bar() {
// 自由变量的查找是在函数定义的作用域向上找，而不是执行的作用域
console.log(a); // 10
}
foo();
闭包
闭包是作用域应用的特殊情况，有两种表现
- 函数作为参数传递
- 函数作为返回值
闭包在实际开发中的应用
闭包经常用来隐藏数据，做私有变量
// 在这个例子中，无论怎样都无法去直接获取data的值，只能通过方法去设置或获取对应的值
function store() {
// 永远无法直接操作该数据 data
const data = {};
return {
get(key) {
return data[key];
}
set(key, value) {
data[key] = value;
}
}
}
const s = store();
s.set('a', 'asd');
console.log(s.get('a')); // asd
闭包的影响
变量会常驻内存，得不到释放，所以闭包不要乱用
- 自由变量：内存会被释放
let a = 1;
function fn1() {
let b = 10;
function fn2() {
let c = 20;
function fn3() {
let d = 30;
return a + b + c + d;
}
fn3(); // 1. fn3执行完后 c、d 就被释放
}
fn2(); // 2. fn2执行完后 b 就被释放
}
fn1(); // 3. fn1执行完后 a 就被释放
- 函数作为返回值：内存不会被释放
function store() {
// 永远无法直接操作该数据 data，data永远不会被释放
const data = {};
return {
get(key) {
return data[key];
}
set(key, value) {
data[key] = value;
}
}
}
const s = store();
s.set('a', 'asd');
console.log(s.get('a')); // asd
this
- 作为普通函数被调用
- 使用
call、apply、bind改变this指向 - 作为对象方法被调用
- 在class的方法中被调用
- 箭头函数，其this是上级作用域的值
this的指向实在函数执行的时候确定的，不是在函数定义的时候确定的，而作用域是在定义的时候确定的
function fn1() {
console.log(this);
}
fn1(); // this = window
fn1.call({ x: 100 }); // this = {x:100}
const fn2 = fn1.bind({ x: 200 })
fn2(); // this = { x: 200 }
const zhang = {
name: 'zhang',
sayHi() {
console.log(this); // 当前对象
},
wait() {
console.log(this); // 当前对象
setTimeout(function() {
console.log(this); // window，这个函数是setTimeout调用的，而setTimeout指向的是window
});
},
wait() {
setTimeout(() => {
console.log(this); // 当前对象
});
}
};
class People {
constructor(name) {
this.name = name;
}
sayHi() {
console.log(this); // People的实例对象
}
}
new People().sayHi();
手写一个bind函数
Function.prototype._bind = function() {
// 将arguments参数转换为数组
const args = Array.prototype.slice.call(arguments);
// 取出args中的第一个元素，这个元素作为this的范围，并删除第一个元素
const cxt = args.shift();
// 返回一个函数
return function() {
return this.apply(ctx, args)
}
}
手写一个apply函数
// apply的第一个参数是上下文，第二个参数是数组
Function.prototype._apply = function() {
// 将arguments参数转化为数组
const args = Array.prototype.slice.call(arguments);
// 取出args中的第一个元素，这个元素作为this的范围，并删除第一个元素
const ctx = args.shift();
// 当前this指向的是调用的函数，把this绑定到ctx即obj上
// 将要当前调用的函数绑定到新的this上
ctx._fn = this;
// 通过ctx来执行_fn函数，此时的this指向的是ctx对象，此时foo的this就指向为obj对象，从而改变了this的指向
// 执行调用的函数
ctx._fn(...args[0]);
// 删除ctx上的_fn删除
// 删除调用的函数
delete ctx._fn;
};
function foo(name, age) {
console.log(this); // 指向 obj 对象
this.name = name;
this.age = age;
}
const obj = { a: 2 };
foo._apply(obj, ["leo", 20]);
手写一个call函数【和apply的原理一样】
Function.prototype._call = function() {
// 将arguments参数转化为数组
const args = Array.prototype.slice.call(arguments);
// 取出args中的第一个元素，这个元素作为this的范围，并删除第一个元素
const ctx = args.shift();
console.log(args);
// 将this即foo函数绑定到ctx即obj上
ctx._fn = this;
// 通过ctx来执行_fn函数，此时的this指向的是ctx对象，此时foo的this就指向为obj对象，从而改变了this的指向
ctx._fn(...args);
// 删除ctx上的_fn删除
delete ctx._fn;
};
function foo(name, age) {
this.name = name;
this.age = age;
}
const obj = { a: 2 };
foo._call(obj, "leo", 20);
单线程和异步
js是单线程的语言，只能同时做一件事，浏览器和nodejs已支持js启动进程，如web worker，js和dom渲染公用一个线程，因js可修改dom结构，遇到等待（请求、定义）不能卡住，使用异步的用调用callback形式。
异步的使用场景
- 网络请求
- 定时任务
异步的出现会出现一个问题就是callback hell，就会一直嵌套，如果有100个请求那就会嵌套100次
$.get(url， function(res) {
$.get(url1， function(res1) {
$.get(url2， function(res2) {
$.get(url3， function(res3) {
})
})
})
})
为了解决解决callback hell【地域回调】，现在最佳的方式是使用Promise，这样就不会出现地域回调的问题
$.get(url).then(res => {
return $.get(url1)
}).then(res => {
return $.get(url2)
}).then(res => {
return $.get(url3)
})
