第一章 JavaScript基础
第一节 引用传递
什么是引用传递
JavaScript数据类型分为基本类型和引用类型，对应的传递类型是值传递和引用传递
其中基本数据类型为Number、String、Boolean、Symbol、undefined、Null,
引用数据类型为 Object、Array、Function，
值传递：将这些变量赋值到另外的变量，实际上是将对应的值拷贝了一份，然后赋值给新的变量。我们把它称作值传递。
引用传递：引用类型如对象是通过引用传递，而不是值传递。也就是说，变量赋值只会将地址传递过去。
什么又是传递引用
我猜是把引用类型赋值给新变量的这个过程
什么类型有这种行为
引用类型 Object、Array、Function
什么是包装类型
为了便于操作基本类型值，ECMAScript 提供了 3 个特殊的引用类型：Boolean、Number和 String。每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而能够调用一些方法来操作这些数据。
var box = 'Mr. Lee';//定义一个字符串
var box2 = box.substring(2);//截掉字符串前两位
alert(box2);//输出新字符串
怎么从内存的角度解释引用问题
JavaScript基本类型放在栈区。引用类型的指针（堆区内存地址）存在栈区，实际对象本体存在堆区
什么是深拷贝和浅拷贝
浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。
深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。
如何实现深拷贝
为了更好的区分深拷贝浅拷贝，所以深浅拷贝的方法
浅拷贝的实现方式
- Object.assign()
Object.assign()方法可以吧任意多的源对象自身的可枚举属性拷贝给目标对象，并返回目标对象。
Object.assign()拷贝的是属性值，也就是说
假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。
如果对象的属性值为简单类型（如string，number），通过Object.assign({},srcObj);得到的新对象为深拷贝；
如果属性值为对象或其它引用类型，那对于这个对象而言其实是浅拷贝的。
let obj1 = { person: {name: "kobe", age: 41},sports:'basketball' };
let obj2 = Object.assign({}, obj1);
obj2.person.name = "wade";
obj2.sports = 'football'
console.log(obj1); // { person: { name: 'wade', age: 41 }, sports: 'basketball' }
- lodash的_.clone方法
var _ = require('lodash');
var obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3]
};
var obj2 = _.clone(obj1);
console.log(obj1.b.f === obj2.b.f);// true
- ES6展开运算符
...
展开运算符是一个 es6 / es2015特性，它提供了一种非常方便的方式来执行浅拷贝，这与 Object.assign 的功能相同。
let obj1 = { name: 'Kobe', address:{x:100,y:100}}
let obj2= {... obj1}
obj1.address.x = 200;
obj1.name = 'wade'
console.log('obj2',obj2) // obj2 { name: 'Kobe', address: { x: 200, y: 100 } }
- Array.prototype.concat()
let arr = [1, 3, {
username: 'kobe'
}];
let arr2 = arr.concat();
arr2[2].username = 'wade';
console.log(arr); //[ 1, 3, { username: 'wade' } ]
- Array.prototype.slice()
let arr = [1, 3, {
username: ' kobe'
}];
let arr3 = arr.slice();
arr3[2].username = 'wade'
console.log(arr); // [ 1, 3, { username: 'wade' } ]
深拷贝的实现方式
- JSON.parse(JSON.stringify())
JSON.stringify将对象转成JSON字符串，再用JSON.parse把字符串解析成对象。
这种方法虽然可以实现数组或对象深拷贝,但不能处理函数和正则。
因为这两者基于JSON.stringify和JSON.parse处理后，得到的正则就不再是正则（变为空对象），得到的函数就不再是函数（变为null）了。
- lodash的_.cloneDeep方法
var _ = require('lodash');
var obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3]
};
var obj2 = _.cloneDeep(obj1);
console.log(obj1.b.f === obj2.b.f);// false
- jQuery.extend()方法
var $ = require('jquery');
var obj1 = {
a: 1,
b: { f: {g: 1} },
c: [1,2,3]
}
var obj2 = $.extend(true, {}, obj1);
console.log(obj1.b.f === obj2.b.f) // false
- 手写递归方法
递归方法实现深度克隆原理：遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝。
function deepClone(obj, hash = new WeakMap()) {
if (obj === null) return obj;// 如果是null或者undefined我就不进行拷贝操作
if(obj instanceof Date) return new Date(obj);
if(obj instanceof RegExp) return new RegExp(obj);
// 可能是对象或基础值 如果是函数的话不需要深拷贝
if(typepf obj !== 'object') return obj;
// 是对象的话就要进行深拷贝
if(hash.get(obj)) return hash.get(obj);
let cloneObj = new obj.constructor();
// 找到所属类原型上的constructor, 而原型上的 constructor指向的是当前类本身
hash.set(obj, cloneObj);
for(let key in obj) {
if(obj.hasOwnProperty(key)) {
// 实现一个递归拷贝
cloneObj[key] = deepClone(obj[key], hash);
}
}
return cloneObj;
}
webworker之间传递数据是引用传递吗
Worker 与“主线程”之间的数据传递默认是通过结构化克隆（Structured Clone）完成的。数据量较大时，克隆过程会比较耗时，这会影响 postMessage 和 onmessage 函数的执行时间。
解决的办法一是先通过 JSON.stringify 将对象序列化，接收之后再用 JSON.parse 还原。因为：stringfiy + 传递字符串的耗时 < 传递对象的耗时 。