深拷贝 浅拷贝

Obejct.assign是ES6新添加的接口，主要的用途是用来合并多个JavaScript的对象。

Object.assign()接口可以接受多个参数，第一个参数是目标对象，后面的都是源对象，assign方法将多个源对象的属性和方法都合并到了目标对象上面，如果在这个过程中出现同名的属性（方法），后合并的属性（方法）会覆盖之前的同名属性（方法）。

Assign的基本用法如下：
Var target = {a:1};
Var source1 ={b:2};
Var source2={c:3};
Object.assign(target,source1,source2);
//结果如下：
//{a:1,b:2,c:4}

assign的设计目的是用于合并接口的，所以它接受的第一个参数（目标）应该是对象，如果不是对象的话，它会在内部转换成对象，所以如果碰到null或者undefined这种不能转换成对象的值得话，assign就会报错，但是如果源对象的参数位置，接收到了无法转换为对象的参数的话，会忽略这个源对象参数。

这里要看一个例子：

Const v1 = ‘abc’;
Const v2= true;
Const v3 = 10;

Const obj =Object.assign({},v1,v2,v3);
Console.log(obj); //{‘0’:’a’,’1’:’b’,’2’:’c’}

为什么会出现这个结果呢？
首先，第一个参数位置接收到的是对象，所以不会报错。
其次，由于字符串转换成对象时，会将字符串中每个字符作为一个属性，所以，abc三个字符作为’0’,’1’,’2’三个属性被合并进入了。
但是布尔值和数值在转换对象时，虽然也成功了，但是属性都是不可枚举的，所以属性没有被成功合并进去。在这里需要记住“assign不会合并不可枚举的属性”。

上面就是对布尔值、数值和字符串转换成对象后得到的结果。

同样，Object.assign拷贝的属性是有限制的。只会拷贝对象本身的属性（不会拷贝继承属性），也不会拷贝不可枚举的属性。但是属性名为Symbol值的属性，是可以被Object.assign拷贝的。
如果assign只接收到了一个对象作为参数的话，就是说没有源对象要合并到目标对象上，那会原样把目标对象返回。

知识要点：
1、Object.assign进行的拷贝是浅拷贝。也就是说，如果拷贝过来的属性的值是对象等复合属性，那么只拷贝过来一个引用。
由于是浅拷贝，所以属性a的内部有任何变化，都会在目标对象上呈现出来。
2、Object.assign进行合并的时候，一旦碰到同名属性，就会出现覆盖现象。所以使用时务必小心。
3、Object.assign是针对Object开发的API，一旦在源对象的参数未知接收到了其他类型的参数，会尝试类型转换。如果是数组类型的话，类型转换的结果是将每个数组成员的值作为属性键值，将数组成员在数组中的位置作为属性键名。多个数组组成参数一同传入的话，还会造成覆盖。具体例子如下：

Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]

Object.assign只能将属性值进行复制，如果属性值是一个get（取值函数）的话，那么会先求值，然后再复制

深拷贝 浅拷贝

基本类型是按值传递
对象类型是按引用传值

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟源对象不共享内存，修改新对象不会改到源对象。

var obj1 = {
    a:10,
    b:20,
    c:30
};
var obj2 = obj1;
obj2.b=100;
console.log(obj2);//{a: 10, b: 100, c: 30}
console.log(obj1);//{a: 10, b: 100, c: 30}

// 浅拷贝
// 1、自己遍历循环
// 2、object.assign()可以处理一层的深拷贝，

function simpleClone(initalObj){
    var obj = {};
    for(var i in initalObj){
        obj[i]=initalObj[i];
    }
    return obj;
}

var obj = {
    a:'hello',
    b:{
        first:'111',
        second:{
            third:'333'
        }
    },
    c:["bob",'tom','jenny'],
    d:function(){
        alert('hello world');
    }
}

var cloneObj=simpleClone(obj);

var cloneObj2=Object.assign({},obj);

// console.log(cloneObj);
// cloneObj.b.second.third='222';
// console.log(obj.b.second.third);

cloneObj2.b.second.third='222111';
cloneObj2.b='first';
console.log(obj.b.first);
// console.log(cloneObj2.b.second.third);
// console.log(obj.b.second.third);

// 实现深拷贝
// 转成JSON再转回来
// 这是一种简单的实现深拷贝的方式，但是有不少坏处
// 1、它会抛弃对象的constructor，就是在深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object
// 2、这种方法能正确处理的对象只有Number String Boolean Array等扁平对象，即能够被json直接表示的数据结构。
// RegExp对象是无法通过这种方式深拷贝的。
// 也就是说，只有可以转成JSON格式的对象才可以这样用，像function没办法转成JSON。

var obj1 = {
    body:{
        a:10
    }
};
var obj2 =JSON.parse(JSON.stringify(obj1));
obj2.body.a=20;

console.log(obj1);
console.log(obj2);

html 一般的静态网页文件
tpl 一般用于框架、cms、模板引擎的模板文件。
smarty 也是用tpl后缀作模板文件