（七）-前端-原型链

7.原型及原型链

原型

- 函数都带有一个prototype 属性，这是属性是指向构造函数的原型对象，这个对象包含所有实例共享的属性和方法。

- 原型对象都有一个constructor 属性，这个属性指向所关联的构造函数。

- 每个对象都有一个__proto__ 属性[非标准的方法]，这个属性指向构造函数的原型 prototype

原型链

- 当访问实例对象的某个属性时，会先在这个对象本身的属性上查找，如果没有找到，则会 通过 proto 属性去原型上查找，如果还没有 找到则会在构造函数的原型的__ proto__中查 找， 这样一层层向上查找就会形成一个作用域链，称为原型链

原型相关习题



Object.create****的作用：

let obj = {a:123};
let o = Object.create(obj);
//该函数返回了一个新的空对象，但是该空对象的__proto__是指向了obj这个参数
// 手写Object.create
function create(proto) {
  function F() {}
  F.prototype = proto;
 
  return new F();
}

new****的执行过程是怎么回事？

new操作符做了这些事：

· 它创建了一个全新的对象

· 它会被执行[[Prototype]]（也就是__proto__）链接

· 它使this指向新创建的对象

· 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上

· 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)，那么new表达式中的函数调用将返回该对象引用

//模拟new

function objectFactory() {

 const obj = new Object();

 const Constructor = [].shift.call(arguments);

 

 obj.__proto__ = Constructor.prototype;

 

 const ret = Constructor.apply(obj, arguments);

 

 return typeof ret === "object" ? ret : obj;

}

 

call,apply,bind****三者的区别？

**
** apply() 方法调用一个函数, 其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数fun.apply(thisArg, [argsArray])

apply 和 call 基本类似，他们的区别只是传入的参数不同。

apply 和 call 的区别是 call 方法接受的是若干个参数列表，而 apply 接收的是一个包含多个参数的数组。

bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。

call做了什么:

将函数设为对象的属性

执行&删除这个函数

指定this到函数并传入给定参数执行函数

如果不传入参数，默认指向为 window

//实现一个call方法：

Function.prototype.myCall = function(context) {

 //此处没有考虑context非object情况

 context.fn = this;

 let args = [];

 for (let i = 1, len = arguments.length; i < len; i++) {

  args.push(arguments[i]);

 }

 context.fn(...args);

 let result = context.fn(...args);

 delete context.fn;

 return result;

};

/ 模拟 apply
Function.prototype.myapply = function(context, arr) {
  var context = Object(context) || window;
  context.fn = this;
 
  var result;
  if (!arr) {
    result = context.fn();
  } else {
    var args = [];
    for (var i = 0, len = arr.length; i < len; i++) {
      args.push("arr[" + i + "]");
    }
    result = eval("context.fn(" + args + ")");
  }
 
  delete context.fn;
  return result;
};
 
 
实现bind要做什么
返回一个函数，绑定this，传递预置参数
bind返回的函数可以作为构造函数使用。故作为构造函数时应使得this失效，但是传入的参数依然有效
 
// mdn的实现
if (!Function.prototype.bind) {
  Function.prototype.bind = function(oThis) {
    if (typeof this !== 'function') {
      // closest thing possible to the ECMAScript 5
      // internal IsCallable function
      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }
 
    var aArgs   = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP    = function() {},
        fBound  = function() {
          // this instanceof fBound === true时,说明返回的fBound被当做new的构造函数调用
          return fToBind.apply(this instanceof fBound
                 ? this
                 : oThis,
                 // 获取调用时(fBound)的传参.bind 返回的函数入参往往是这么传递的
                 aArgs.concat(Array.prototype.slice.call(arguments)));
        };
 
    // 维护原型关系
    if (this.prototype) {
      // Function.prototype doesn't have a prototype property
      fNOP.prototype = this.prototype; 
    }
    // 下行的代码使fBound.prototype是fNOP的实例,因此
    // 返回的fBound若作为new的构造函数,new生成的新对象作为this传入fBound,新对象的__proto__就是fNOP的实例
    fBound.prototype = new fNOP();
 
    return fBound;
  };
}
 
 
// 简单版
    Function.prototype.myBind = function(context,...arg){
        // this --->  fn
        var _this = this;
        return function(...ary){
            // _this(...arg)
            return _this.apply(context,arg.concat(ary))
        }
    }

实现类的继承

类的继承在几年前是重点内容，有n种继承方式各有优劣，es6普及后越来越不重要，那么多种写法有点『回字有四样写法』的意思，如果还想深入理解的去看红宝书即可，我们目前只实现一种最理想的继承方式。

function Parent(name) {
    this.parent = name
}
Parent.prototype.say = function() {
    console.log(`${this.parent}: 你打篮球的样子像kunkun`)
}
function Child(name, parent) {
    // 将父类的构造函数绑定在子类上
    Parent.call(this, parent)
    this.child = name
}
/** 
 1. 这一步不用Child.prototype =Parent.prototype的原因是怕共享内存，修改父类原型对象就会影响子类
 2. 不用Child.prototype = new Parent()的原因是会调用2次父类的构造方法（另一次是call），会存在一份多余的父类实例属性
3. Object.create是创建了父类原型的副本，与父类原型完全隔离
*/
Child.prototype = Object.create(Parent.prototype);
Child.prototype.say = function() {
    console.log(`${this.parent}好，我是练习时长两年半的${this.child}`);
}
// 注意记得把子类的构造指向子类本身
Child.prototype.constructor = Child;
var parent = new Parent('father');
parent.say() // father: 你打篮球的样子像kunkun
var child = new Child('cxk', 'father');
child.say() // father好，我是练习时长两年半的cxk

谈谈你对this指向的理解

this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象

改变 this 的指向我总结有以下几种方法：

· 使用 ES6 的箭头函数

· 在函数内部使用 _this = this

· 使用 apply、call、bind

· new 实例化一个对象

全局作用域下的this指向window

如果给元素的事件行为绑定函数，那么函数中的this指向当前被绑定的那个元素

函数中的this，要看函数执行前有没有 . , 有 . 的话，点前面是谁，this就指向谁，如果没有点，指向window

自执行函数中的this永远指向window

定时器中函数的this指向window

构造函数中的this指向当前的实例

call、apply、bind可以改变函数的this指向

箭头函数中没有this，如果输出this，就会输出箭头函数定义时所在的作用域中的this