手写call,apply,bind,new以及面向对象编程手写call,apply,bind,new 以及面向对象编程

手写call,apply,bind,new 以及面向对象编程

一. 参数按值传递

在《JavaScript高级程序设计》中提到传递参数：

ECMAScript中所有函数的参数都是按值传递的。

什么是按值传递呢？

把函数外部的值复制给函数内部的参数，就和把值从一个变量复制到另一个变量一样。

1. 按值传递

举个简单的例子：

var value = 1;
function foo(v) {
    v = 2;
    console.log(v); // 2
}
foo(value);
console.log(value) // 1

很好理解，当传递 value 到函数 foo 中，相当于拷贝了一份 value，假设拷贝的这份叫 _value，函数中修改的都是 _value 的值，而不会影响原来的 value 值。

2. 共享传递

拷贝虽然很好理解，但是当值是一个复杂的数据结构的时候，拷贝会产生性能上的问题。

这里提及一种：按引用传递。

所谓按引用传递，就是传递对象的引用，函数内部对参数的任何改变都会影响该对象的值，因为两者引用的是同一个对象。

举个例子：

var obj = {
    value: 1
};
function foo(o) {
    o.value = 2;
    console.log(o.value); // 2
}
foo(obj);
console.log(obj.value) // 2

为什么《JavaScript高级程序设计》都说了 ECMAScript 中所有函数的参数都是按值传递的，那为什么能按"引用传递"成功呢？

var obj = {
    value: 1
};
function foo(o) {
    // 直接修改o，比如直接将 o 赋值为一个基本类型
    o = 2;
    console.log(o); // 2
}
foo(obj);
console.log(obj.value) // 1

如果 JavaScript 采用的是引用传递，外层的值也会被修改，那这里如何解释？

这就要讲到第二种传递方式，叫按共享传递。

而共享传递是指，在传递对象的时候，传递的是地址索引。所以修改 o.value，可以通过地址索引找到原值，所以 obj.value 也被修改了。但是直接修改 o，比如直接将 o 赋值为一个基本类型，并不会修改原值。

最后，你可以这样理解：

参数如果是基本类型是按值传递，如果是引用类型按共享传递。

但是因为拷贝副本也是一种值的拷贝，所以在高程中也直接认为是按值传递了。

换句话说，函数传递参数，传递的是参数的拷贝：

常规类型拷贝，拷贝的是值 ；
指针拷贝，拷贝的是地址索引；

所以，一共是两种传递方式，按值传递和 共享传递。

3. 总结

javascript中数据类型分为 基本类型 与 引用类型：

基本类型值存储于栈内存中，传递的就是当前值，修改不会影响原有变量的值；
引用类型的指针存于栈内存中，指向堆内存当中的一个实际值，所以引用传递传的“值”是栈内存当中的引用地址，修改时改变了堆内存当中的实际值，也就影响了原有变量的值；

什么是栈？什么是堆？为什么栈存放基本类型，堆存放复杂对象？

栈是一种后入先出（LIFO，last-in-first-out）的数据结构；
堆是一种经过排序的树形数据结构，存取随意；

因为栈中存放的都是 占用空间小、大小固定 的数据，而堆中存放的是 占据空间大、大小不固定 的数据。

栈中存放的基本数据类型共有6种：String、Number、Boolean、null、undefined、Symbol，除了这6种，还存放了指针buffer；
引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。

所以针对上述的内容：

var value = 1;
function foo(v) {
    v = 2;
    console.log(v); // 2
}
foo(value);
console.log(value) // 1

内存分布：

改变前：

	栈内存	堆内存
value	1
v	1

改变后：

	栈内存	堆内存
value	1
v	2

var obj = {
    value: 1
};
function foo(o) {
    o.value = 2;
    console.log(o.value); // 2
}
foo(obj);
console.log(obj.value) // 2

改变前：

	栈内存	堆内存
obj	指针地址	{value: 1}
o	指针地址	{value: 1}

改变后：

	栈内存	堆内存
obj	指针地址	{value: 2}
o	指针地址	{value: 2}

var obj = {
    value: 1
};
function foo(o) {
    o = 2;
    console.log(o); // 2
}
foo(obj);
console.log(obj.value) // 1

改变前：

	栈内存	堆内存
obj	指针地址	{value: 1}
o	指针地址	{value: 1}

改变后：

	栈内存	堆内存
obj	指针地址	{value: 1}
o	2

二. 手写 call 和 apply

在讲解 call 和 apply 之前，我们来说下 this：

this 需要跟执行上下文挂钩（上篇文章有进行详细介绍）;
this 的绑定方式：软绑定和硬绑定;

1.软绑定

this的绑定是动态的，在函数被调用的时候绑定，它指向什么完全取决于函数在哪里调用，情况比较复杂，根据绑定规则进行绑定就叫做软绑定。

我们来看一个软绑定的例子：

window.name = 'Mary';

const person = {
    name: 'Jack',
    say: function() {
        return this.name;
    }
}

console.log(this.name);  // Mary -> this指向了 window
console.log(person.say());  // Jack -> this指向了 person

我们可以看到，不同的调用情况下，不受外力的影响下，this指向自动发生了偏移。

2.硬绑定

通过call，apply, bind等方法，按照自己的想法将函数的this强制绑定到指定的对象上，就叫做硬绑定。

let foo = {
    name: 'helulu'
}

function bar() {
    console.log(this.name);
}

bar.call(foo);  // helulu
bar.apply(foo);  // helulu
let barFoo = bar.bind(foo);
barFoo(); // helulu

可以看到，call，apply, bind方法强行将this绑定到了foo上。

下面我们来看下它们的实现原理。

1. 手写call

1.1 call的作用以及使用方法

call() ：在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。

let foo = {
    value: 1
};

function bar() {
    console.log(this.value);
}

bar.call(foo); // 1

call的作用：

call 改变了 this 的指向，指向到 foo；
call 给 foo 添加了 bar 函数；
bar 函数执行了；

调用call方法等同于：

let foo = {
    value: 1,
    bar: function() {
        console.log(this.value)
    }
};

foo.bar(); // 1

这个时候 this 就指向了 foo，foo 就可以调用 bar函数，但是这样却给 foo 对象本身添加了一个属性，所以我们手写 call 的时候，需要使用 delete 将这个属性删除。

1.2 手写call的思路

模拟的步骤：

将函数设为对象的属性;
执行该函数；
删除该函数；

以上个例子为例，就是：

// 第一步
// fn 是对象的属性名，反正最后也要删除它，所以起什么都可以。
foo.fn = bar
// 第二步
foo.fn()
// 第三步
delete foo.fn

1.3 手写call

第一版

Function.prototype.call2 = function(context) {
    // context 相当于上个例子中的 foo 对象；
    // bar 调用了 call 方法，所以 this 指向 bar;
    
    // 1.获取调用call的函数，相当于 foo.fn = bar;
    context.fn = this;
    // 2.执行该函数，相当于 foo.fn()
    context.fn();
    // 3.删掉 foo 对象本身多添加的属性
    delete context.fn;
}

测试一下：

 let foo = {
    value: 1
};

function bar() {
    console.log(this.value);
}

bar.call2(foo); // 1

第二版

call除了可以指定 this，还可以传入参数。

var foo = {
    value: 1
};

function bar(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value);
}

bar.call(foo, 'kevin', 18);
// kevin
// 18
// 1

思路：可以从 Arguments 对象中取值，取出第二个到最后一个参数，然后放到一个数组里。

从 Arguments 中取第二个到最后一个的参数的代码：

// 以上个例子为例，此时的arguments为：
// arguments = {
//      0: foo,
//      1: 'kevin',
//      2: 18,
//      length: 3
// }

// 因为arguments是类数组对象，所以可以用for循环
var args = [];
for(var i = 1, len = arguments.length; i < len; i++) {
    args.push("arguments[' + i + ']");
}

// 执行后 args为 ["arguments[1]", "arguments[2]", "arguments[3]"]

但是这种方法比较麻烦，我们可以借助数组的 slice 方法进行处理：

let arg = [...arguments].slice(1);

第二版手写call代码如下：

Function.prototype.call2 = function(context) {
    context.fn = this;
    // 截取第一个参数foo，得到['kevin', 18]
    let args = [...arguments].slice(1)
    // 再把剩余参数数组解构，相当于传入'kevin', 18;
    context.fn(...args)
    delete context.fn;
}

测试一下：

var foo = {
    value: 1
};

function bar(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value);
}

bar.call2(foo, 'kevin', 18); 
// kevin
// 18
// 1

第三版

在call()中，有两点需要注意的：

第一个参数可以传 null，当为 null 的时候，this 视为指向 window；

var value = 1;

function bar() {
    console.log(this.value);
}

bar.call(null); // 1

此时 this 指向 window，所以 this.value 相当于 window.value，结果是 1。

针对函数，可以实现返回值；

var foo = {
    value: 1
}

function bar(name, age) {
    return {
        value: this.value,
        name,
        age
    }
}

var result = bar.call(foo, 'kevin', 18)
console.log(result);
// {
//    value: 1,
//    name: 'kevin',
//    age: 18
// }

第三版手写call代码如下：

Function.prototype.call2 = function (context) {
    // 处理 context 传入 null 的情况
    var context = context || window;
    context.fn = this;

    let args = [...arguments].slice(1);
    // 设置返回值
    let result = context.fn(...args);

    delete context.fn
    return result
}

测试一下：

var value = 2;

var foo = {
    value: 1
}

function bar(name, age) {
    return {
        value: this.value,
        name: name,
        age: age
    }
}

bar.call2(null); // 2

let ret = bar.call2(foo, 'kevin', 18));
console.log(ret);
// {
//    value: 1,
//    name: 'kevin',
//    age: 18
// }

最终版

在内部设置 fn 函数，可能会出现属性名冲突的问题，所以对此做出优化：创建 symbol 变量。

这边给出最简化的写法：

Function.prototype.call2 = function(context, ...args) {
  // 判断是否是 undefined 和 null
  if (typeof context === 'undefined' || context === null) {
    context = window
  }
  let fnSymbol = Symbol()
  context[fnSymbol] = this
  let fn = context[fnSymbol](...args)
  delete context[fnSymbol] 
  return fn
}

2. 手写apply

2.1 apply 的使用

apply 的实现跟 call 类似，只是入参不一样，apply 的参数为数组:

var foo = {
    value: 1
};

function bar(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value);
}

bar.apply(foo, ['kevin', 18]);
// kevin
// 18
// 1

2.2 最终版

因为 apply第二个参数传入的是数组，所以我们直接接受，然后解构，传给apply调用的方法,比如bar(name, age)，不需要像call那样处理。

Function.prototype.apply2 = function(context, args) {
  // 判断是否是 undefined 和 null
  if (typeof context === 'undefined' || context === null) {
    context = window
  }
  let fnSymbol = Symbol()
  context[fnSymbol] = this
  let fn = context[fnSymbol](...args)
  delete context[fnSymbol] 
  return fn
}

三. 手写bind

1. bind的作用及使用方法

bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一系列参数将会在传递的实参前传入作为它的参数。

var foo = {
    value: 1
};

function bar() {
    console.log(this.value);
}

// 返回了一个函数
var bindFoo = bar.bind(foo); 
// 调用返回的函数
bindFoo(); // 1

bind 的作用与 call/apply 基本相同：

bind 改变了 this 的指向，指向到 foo；
bind 给 foo 添加了 bar 函数；
bar 函数执行了；

bind 与 call/apply 的异同点：

bind 需要返回一个新函数（调用新函数后结果与 call/apply 相同）；
bind 返回的新参数中可以传参（后面会讲到）；

2. 手写bind的思路

关于指定 this 的指向，我们可以使用 call 或者 apply 实现，实现后，作为函数体 return。

3. 手写bind

第一版

手写bind()，需要将 this 先进行存储，因为在后续的返回函数中， this 的指向将会偏移，变为 window。

Function.prototype.bind2 = function (context) {
    // 此时 this 指向 bar,因为是 bar 调用的 bind: bar.bind(foo);
    var self = this;

    // 考虑到绑定函数可能是有返回值的，加上return
    return function () {
       // 相当于bindFoo，调用 bindFoo 的是 window, 此时 this 指向 window，所以要使用之前存储的self
       // 这句话相当于 bar.apply(foo)
        return self.apply(context);
    }
}

测试一下：

var foo = {
    value: 1
}

function bar() {
    console.log(this.value);
}

let bindFoo = bar.bind2(foo);
bindFoo();  // 1

关于调用 apply 的为什么不是 this，而必须是 self?

var bindFoo = bar.bind(foo);
bindFoo();
// 相当于
window.bindFoo();
// 或者
(function(){
 // this指向window，而self指向bar
  this.apply(context)
})()

第二版：传参的模拟实现

在bind()中，关于参数的传递的用法：

var foo = {
    value: 1
};

function bar(name, age) {
    console.log(this.value);
    console.log(name);
    console.log(age);

}
// 参数可以分两次传递，不影响最后的效果
var bindFoo = bar.bind(foo, 'daisy');
bindFoo('18');
// 1
// daisy
// 18

当需要传 name 和 age 两个参数时，可以在 bind 的时候，只传一个 name，在执行返回的函数的时候，再传另一个参数 age。

所以手写bind,需要使用arguments对两次传入参数进行concat处理，调整下上面的第一版。

第二版：

Function.prototype.bind2 = function (context) {

    var self = this;
    // 获取 bind2 函数从第二个参数到最后一个参数
    // 也就是传入 bind 的参数，即 bar.bind(foo,'daisy') 的 ['daisy']
    var args = Array.prototype.slice.call(arguments, 1);

    return function () {
        // 这个时候的arguments是指bind返回的函数bindFoo中传入的参数
        // 获取传入bindFoo(18)中的参数，[18]
        var bindArgs = Array.prototype.slice.call(arguments);
        // 将两次传入的参数合并传给apply
        return self.apply(context, args.concat(bindArgs));
        // 或者不使用concat,使用 es6语法 也可以
        // return self.apply(context, [...args, ...bindArgs]);
    }
}

直接使用es6的简化写法：

Function.prototype.bind2 = function (context, ...args) {
    let self = this;
    return function () {
        return self.apply(context, [...args, ...arguments])
    }
}

第三版：构造函数效果的模拟实现

bind 还有一个特点，就是

一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

也就是说当 bind 返回的函数作为构造函数的时候，调用 bind 时指定的 this 值会失效，但传入的参数依然生效。

在bind()中，关于构造函数的用法：

var value = 2;

var foo = {
    value: 1
};

function bar(name, age) {
    this.habit = 'coding';
    console.log(this.value);
    console.log(name);
    console.log(age);
}

bar.prototype.friend = 'kevin';

var bindFoo = bar.bind(foo, 'daisy');

var obj = new bindFoo('18');

console.log(obj.habit);
console.log(obj.friend);

// undefined
// daisy
// 18
// coding
// kevin

我们发现尽管在全局和 foo 中都声明了 value 值，最后依然返回了 undefind，说明绑定的 this 失效了。

在后文中的第三版代码中，就会知道这个时候的 this 已经指向了 实例obj。

所以我们需要判断bindFoo的返回的值是否是调用bind的返回的函数 bindFoo 的实例（即我们需要判断 obj 是否是 bindFoo 的实例）；如果是，我们需要建立 bindFoo 和 bar 的原型链关系（即 bindFoo.prototype = bar.prototype），如果不是则按照第二版的原逻辑执行。

第三版：

Function.prototype.bind2 = function (context) {
    var self = this;
    var args = [].slice.call(arguments, 1);

    var fBound = function () {
        var bindArgs = [].slice.call(arguments);
        // 当作为构造函数时，this 指向实例，此时 this instanceof fBound 结果为 true，
        // 将绑定函数的 this 指向该实例，可以让实例获得来自绑定函数的值;
        // 当作为普通函数时，this 指向 window，此时结果为 false，将绑定函数的 this 指向 context
        return self.apply(this instanceof fBound ? this : context, args.concat(bindArgs));
    }
    // 实例需要继承绑定函数的prototype上的值，即obj可以通过原型链访问到bar.prototype上的属性
    // 那么需要让bindFoo.prototype = bar.prototype
    fBound.prototype = self.prototype;
    return fBound;
}

第四版：构造函数效果的优化实现

但是在上面的写法中，我们直接将 fBound.prototype = self.prototype，会造成后续的一些问题。如果直接修改 bindFoo.prototype ，也会修改绑定函数的原型 bar.prototype。

这个时候，我们可以通过一个空函数来进行中转。首先创建一个空函数，然后将它的 prototype 和绑定函数的 prototype 建立联系，然后让 fBound.prototype 指向这个空函数的实例。

第四版：

Function.prototype.bind2 = function (context, ...args) {

    var self = this;
    
    // 创建空函数
    var fNOP = function () {};

    var fBound = function () {
        // 因为fNOP.prototype 指向了 bar.prototype，所以实例的原型是 fNOP
        // 所以这个地方要把上面的 fBound 调整为 fNOP
        return self.apply(this instanceof fNOP ? this : context, [...args, ...arguments]);
    }

    fNOP.prototype = self.prototype;
    // fBound 与 fNOP的实例 建立联系
    fBound.prototype = new fNOP();
    return fBound;
}

最终版：添加错误提示

如果调用 bind ，调用的变量不是函数时，会提示错误：

var foo = {
    value: 1
}

var a = 1;

let bindFoo = a.bind(foo);
bindFoo();  // Uncaught TypeError: a.bind is not a function

我们基于第四版，对这种情况加上一个判断，最终代码为：

Function.prototype.bind2 = function (context, ...args) {

    if (typeof this !== "function") {
      throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var self = this;

    var fNOP = function () {};

    var fBound = function () {
        return self.apply(this instanceof fNOP ? this : context, [...args, ...arguments]);
    }

    fNOP.prototype = self.prototype;
    fBound.prototype = new fNOP();
    return fBound;
}

四. 手写模拟new

1. new 的使用及实现功能

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一。

new 的用法不用说了，我们先看看 new 实现了哪些功能：

function Person (name, age) {
    this.name = name;
    this.age = age;

    this.habit = 'Games';
}

Person.prototype.strength = 80;

Person.prototype.sayYourName = function () {
    console.log('I am ' + this.name);
}

var person = new Person('Kevin', '18');

console.log(person.name) // Kevin
console.log(person.habit) // Games
console.log(person.strength) // 60

person.sayYourName(); // I am Kevin

我们可以看到，实例 person 可以：

访问到 Person 构造函数里的属性；
访问到 Person.prototype 中的属性；

接下来，我们可以尝试着模拟一下了。

因为 new 是关键字，所以无法像 bind 函数一样直接覆盖，所以我们写一个函数，命名为 objectFactory，来模拟 new 的效果。用的时候是这样的：

function Person () {
    ......
}

// 使用 new
var person = new Person(...);
// 使用 objectFactory
var person = objectFactory(Person, ...)

2. 模拟new思路

因为 new 的结果是一个新对象，所以在模拟实现的时候，我们也要建立一个新对象，假设这个对象叫 obj，因为 obj 会具有 Person 构造函数里的属性，所以实例的 proto 属性要指向构造函数的 prototype，通过建立起这样的关系，就可以访问原型上的属性了。

然后，obj 会具有 Person 构造函数里的方法，我们可以使用 Person.apply(obj, arguments)，将 this 指向obj 的同时，给 obj 添加新的方法。

模拟的步骤：

创建对象：用 new Object() 的方式新建了一个对象 obj；
参数处理：取出第一个参数，就是我们要传入的构造函数，此外因为 shift 会修改原数组，所以 arguments 会被去除第一个参数；
继承属性：将 obj 的原型指向构造函数，这样 obj 就可以访问到构造函数原型中的属性；
继承方法：使用 apply，改变构造函数 this 的指向到新建的对象，这样 obj 就可以访问到构造函数中的方法；
返回对象：返回 obj；

3. 初步实现

第一版：

function objectFactory() {
    var obj = new Object();
    
    // Constructor 相当于 示例中的Person
    const Constructor = [].shift.call(arguments);
    // 将实例和构造函数建立原型链关系
    obj.__proto__ = Constructor.prototype;
    // 把 Person 上面的方法添加到 obj 上 
    Constructor.apply(obj, arguments);
    
    return obj;
    
};

测试一下：

function Person (name, age) {
    this.name = name;
    this.age = age;

    this.habit = 'code review';
}

Person.prototype.strength = 60;

Person.prototype.sayYourName = function () {
    console.log('I am ' + this.name);
}

var person = objectFactory(Person, 'Kevin', '18')

console.log(person.name) // Kevin
console.log(person.habit) // code review
console.log(person.strength) // 60

person.sayYourName(); // I am Kevin

4. 最终实现

假如构造函数有返回值：

function Person (name, age) {
    this.strength = 60;
    this.age = age;

    return {
        name: name,
        habit: 'code review'
    }
}

var person = new Person('Kevin', '18');

console.log(person.name) // Kevin
console.log(person.habit) // code review
console.log(person.strength) // undefined
console.log(person.age) // undefined

在这个例子中，构造函数返回了一个对象，在实例 person 中只能访问返回的对象中的属性。

而且还要注意一点，在这里我们是返回了一个对象，假如我们只是返回一个基本类型的值呢？

再举个例子：

function Person (name, age) {
    this.name = name;
    this.age = age;
    this.habit = 'code review';

    return 'handsome boy';
}

Person.prototype.strength = 60;

var person = new Person('Kevin', '18');

console.log(person.name) // Kevin
console.log(person.habit) // code review
console.log(person.strength) // 60
console.log(person.age) // 18

这次尽管有返回值，但是相当于按照没有返回值进行处理。

所以我们还需要判断返回的值是不是一个对象，如果是一个对象，我们就返回这个对象，如果没有，我们该返回什么就返回什么。

最终版：

// 最终版的代码
function objectFactory() {
    var obj = new Object(),
    const Constructor = [].shift.call(arguments);
    obj.__proto__ = Constructor.prototype;
    // 获取返回值
    var ret = Constructor.apply(obj, arguments);
    // 根据返回值判断返回什么
    return typeof ret === 'object' ? ret : obj;

};

五. 类数组对象与arguments

1. 类数组对象

所谓的类数组对象:

拥有一个 length 属性和若干索引属性的对象

举个例子：

var array = ['name', 'age', 'sex'];

var arrayLike = {
    0: 'name',
    1: 'age',
    2: 'sex',
    length: 3
}

1.1 读写

console.log(array[0]);  // name
console.log(arrayLike[0]);  // name

array[0] = 'new name';
arrayLike[0] = 'new name';

1.2 长度

console.log(array.length); // 3
console.log(arrayLike.length); // 3

1.3 遍历

for(var i = 0, len = array.length; i < len; i++) {
   console.log(array[i]);
}
for(var i = 0, len = arrayLike.length; i < len; i++) {
    console.log(arrayLike[i])
}

但是如果直接调用原生的数组方法会报错，例如push：

arrayLike.push('code')
// arrayLike.push is not a function

1.4 调用数组方法

通过 call/apply 间接调用:

var arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3 }

Array.prototype.join.call(arrayLike, '&'); // name&age&sex

[].slice.call(arrayLike, 0); // ["name", "age", "sex"] 
// slice可以将类数组转化为数组

[].map.call(arrayLike, (item) => {
    return item.toUpperCase();
}); 
// ["NAME", "AGE", "SEX"]

1.5 类数组转数组的方法

var arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3 }
// 1. slice
Array.prototype.slice.call(arrayLike); // ["name", "age", "sex"] 
// 2. splice
Array.prototype.splice.call(arrayLike, 0); // ["name", "age", "sex"] 
// 3. ES6 Array.from
Array.from(arrayLike); // ["name", "age", "sex"] 
// 4. concat
Array.prototype.concat.apply([], arrayLike)   // ["name", "age", "sex"]

2. Arguments 对象

Arguments 对象只定义在函数体中，包括了函数的参数和其他属性。在函数体中，arguments 指代该函数的 Arguments 对象。

举个例子：

function foo(name, age, sex) {
    console.log(arguments);
}

foo('name', 'age', 'sex')

打印结果：

可以看到除了类数组的索引属性和 length属性之外，还有一个 callee属性。

为什么在函数内部可以使用arguments呢？

因为执行上下文代码准备的时候，就会在代码准备的环境里面 AO 里面默认准备这部分内容。

2.1 length属性

Arguments对象的length属性，表示实参的长度。

使用 函数名.length 可以获取该函数形参的长度。

举个例子：

function foo(b, c, d){
    console.log("实参的长度为：" + arguments.length)
}

foo(1);
console.log("形参的长度为：" + foo.length)

// 实参的长度为：1
// 形参的长度为：3

2.2 callee属性

Arguments 对象的 callee 属性，通过它可以调用函数自身。

讲个闭包经典面试题使用 callee 的解决方法：

var data = [];

for (var i = 0; i < 3; i++) {
    (data[i] = function () {
       console.log(arguments.callee.i) 
    }).i = i;
}

data[0]();
data[1]();
data[2]();

// 0
// 1
// 2

2.3 arguments 和对应参数的绑定

function foo(name, age, sex, hobbit) {

    console.log(name, arguments[0]); // name name

    // 改变形参
    name = 'new name';

    console.log(name, arguments[0]); // new name new name

    // 改变arguments
    arguments[1] = 'new age';

    console.log(age, arguments[1]); // new age new age

    // 测试未传入的是否会绑定
    console.log(sex); // undefined

    sex = 'new sex';

    console.log(sex, arguments[2]); // new sex undefined

    arguments[3] = 'new hobbit';

    console.log(hobbit, arguments[3]); // undefined new hobbit

}

// 只传入name 和 age 属性查看 arguments 和 对应参数 的绑定情况
foo('name', 'age')

得到结论：

传入的参数，实参和 arguments 的值会共享；
当没有传入时，实参和 arguments 值不共享；

2.4 传递参数

将参数从一个函数传递到另一个函数：

// 使用 apply 将 foo 的参数传递给 bar
function bar(a, b, c) {
   console.log(a, b, c);
}

function foo() {
    bar.apply(this, arguments);
}

foo(1, 2, 3)  // 1,2,3

2.5 ES6

使用ES6的 ... 运算符，我们可以轻松将 arguments 转化成数组。

function func() {
    console.log([...arguments]);   
}

func(1, 2, 3);  // [1, 2, 3]

六.创建对象的方式

1. 工厂模式

function createPerson(name) {
    var o = new Object();
    o.name = name;
    o.getName = function () {
        console.log(this.name);
    };

    return o;
}

var person1 = createPerson('kevin');
var person2 = createPerson('Lisa');

优点：简单；

缺点：对象无法识别，因为所有的实例都指向一个原型；

2. 构造函数模式

function Person(name) {
    this.name = name;
    this.getName = function () {
        console.log(this.name);
    };
}

var person1 = new Person('kevin');
var person2 = new Person('Lisa');

优点：实例可以识别为一个特定的类型；

缺点：每次创建实例时，每个方法都要被创建一次；

2.1 构造函数优化

function Person(name) {
    this.name = name;
    this.getName = getName;
}

function getName() {
    console.log(this.name);
}

var person1 = new Person('kevin');
var person2 = new Person('Lisa');

解决了每个方法都要重新创建的问题。

3. 原型模式

function Person() {

}

Person.prototype.name = 'kevin';
Person.prototype.getName = function () {
    console.log(this.name);
};

var person1 = new Person();
var person2 = new Person();

优点：方法不会重新创建；

缺点：

所有的属性和方法都共享；
不能初始化参数；

3.1 原型模式优化

function Person() {

}

Person.prototype = {
    name: 'kevin',
    getName: function () {
        console.log(this.name);
    }
};

var person1 = new Person();
var person2 = new Person();

优点：封装更清晰；

缺点：重写了原型，丢失了constructor属性；

3.2 原型模式优化2

function Person() {

}

Person.prototype = {
    constructor: Person,
    name: 'kevin',
    getName: function () {
        console.log(this.name);
    }
};

var person1 = new Person();
var person2 = new Person();

优点：实例可以通过constructor属性找到所属构造函数；

缺点：

所有的属性和方法都共享；
不能初始化参数；

4. 组合模式

function Person(name) {
    this.name = name;
}

Person.prototype = {
    constructor: Person,
    getName: function () {
        console.log(this.name);
    }
};

var person1 = new Person();
var person2 = new Person();

优点：该共享的共享，该私有的私有，使用最广泛的方式；

缺点：希望写在一个地方，即更好的封装性；

4.1 动态原型模式

function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype.getName = function () {
            console.log(this.name);
        }
    }
}

var person1 = new Person('kevin');
var person2 = new Person('Lisa');

注意：使用动态原型模式时，不能用对象字面量重写原型。

function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype = {
            constructor: Person,
            getName: function () {
                console.log(this.name);
            }
        }
    }
}

var person1 = new Person('kevin');
var person2 = new Person('Lisa');

// 报错 并没有该方法
person1.getName();

// 注释掉上面的代码，这句是可以执行的。
person2.getName();  // Lisa

开始执行var person1 = new Person('kevin')

我们回顾下 new 的实现步骤：

首先新建一个对象；
然后将对象的原型指向 Person.prototype；
然后 Person.apply(obj)；
返回这个对象；

注意这个时候，回顾下 apply 的实现步骤，会执行 obj.Person 方法，这个时候就会执行 if 语句里的内容，注意构造函数的 prototype 属性指向了实例的原型，使用字面量方式直接覆盖 Person.prototype，并不会更改实例的原型的值，person1 依然是指向了以前的原型，而不是 Person.prototype。而之前的原型是没有 getName 方法的，所以就报错了。

如果你就是想用字面量方式写代码，可以尝试下这种：

function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype = {
            constructor: Person,
            getName: function () {
                console.log(this.name);
            }
        }

        return new Person(name);
    }
}

var person1 = new Person('kevin');
var person2 = new Person('Lisa');

person1.getName(); // kevin
person2.getName();  // Lisa

5.继承的方式

5.1 原型链继承

function Parent () {
    this.name = 'Kevin';
}

Parent.prototype.getName = function () {
    console.log(this.name);
}

function Child () {

}

Child.prototype = new Parent();

var child1 = new Child();

console.log(child1.getName()) // Kevin

缺点：引用类型的属性被所有实例共享。

举个例子，下面代码中的 nameList 就会被共享：

function Parent () {
    this.nameList = ['Kevin', 'Lisa', 'Lucy'];
}

function Child () {

}

Child.prototype = new Parent();

var child1 = new Child();

child1.nameLis.push('test');

console.log(child1.nameLis); // ['Kevin', 'Lisa', 'Lucy', 'test']

var child2 = new Child();

console.log(child2.nameLis); // ['Kevin', 'Lisa', 'Lucy', 'test']

5.2 借用构造函数

function Parent () {
    this.nameList = ['Kevin', 'Lisa', 'Lucy'];
}

function Child () {
    Parent.call(this);
}

var child1 = new Child();

child1.nameList.push('test');

console.log(child1.nameList); // ['Kevin', 'Lisa', 'Lucy', 'test']

var child2 = new Child();

console.log(child2.nameList); // ['Kevin', 'Lisa', 'Lucy']

优点：

避免了引用类型的属性被所有实例共享；
可以在 Child 中向 Parent 传参；

function Parent (name) {
    this.name = name;
}

function Child (name) {
    Parent.call(this, name);
}

var child1 = new Child('Lisa');

console.log(child1.name); // Lisa

var child2 = new Child('Kevin');

console.log(child2.name); // Kevin

缺点：

方法都在构造函数中定义，每次创建实例都会创建一遍方法。

5.3 组合继承

function Parent (name) {
    this.name = name;
    this.colorList = ['red', 'blue', 'green'];
}

Parent.prototype.getName = function () {
    console.log(this.name)
}

function Child (name, age) {

    Parent.call(this, name);
    
    this.age = age;

}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child('kevin', '18');
child1.colorList.push('black');

console.log(child1.name); // kevin
console.log(child1.age); // 18
console.log(child1.colorList); // ["red", "blue", "green", "black"]

var child2 = new Child('daisy', '20');

console.log(child2.name); // daisy
console.log(child2.age); // 20
console.log(child2.colorList); // ["red", "blue", "green"]

5.4 原型继承

function createObj(o) {
    function F(){}
    F.prototype = o;
    return new F();
}

缺点：

包含引用类型的属性值始终都会共享相应的值，这点跟原型链继承一样。

var person = {
    name: 'kevin',
    friends: ['daisy', 'kelly']
}

var person1 = createObj(person);
var person2 = createObj(person);

person1.name = 'person1';
console.log(person2.name); // kevin

person1.friends.push('taylor');
console.log(person2.friends); // ["daisy", "kelly", "taylor"]

5.5 寄生式继承

创建一个仅用于封装继承过程的函数，该函数在内部以某种形式来做增强对象，最后返回对象。

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。

function createObj (o) {
    // 相当于 clone.__proto__ === o;
    var clone = Object.create(o);
    clone.sayName = function () {
        console.log('hi');
    }
    return clone;
}

var person1 = createObj(person);
var person2 = createObj(person);