前言

由于写代码的时候使用到了object.prototype.tostring.call这个方法去计算一个对象的类型，所以发现自己对于原型的知识了解还不够透彻，因此打算再次研究一遍关于原型所涉及到的东西，首先发现对象的toString方法会返回[object object] 因此选用对象原型的toString方法，call函数使里面的对象继承了tostring方法

1.js对象类型

js分为普通对象和函数对象，函数对象都是通过new Function创造出来的

首先函数对象分为普通函数和构造函数

有new与无new的差别
写法上,构造函数首字母大写(目的只是用于区分普通函数与构造函数,提醒你在创建实例化对象前加new操作符)
当函数没有被new调用时,构造函数中的this就能与全局this对象(即window)

function f1(){};

var f2 = function(){};

var f3 = new Function();

var o3 = new f1();

var o2 =new Object();

console.log(typeof Object); //function ( Object 是构造函数,Object() 等价于new Object() )

console.log(typeof Function); //function

console.log(typeof o2); //object

console.log(typeof o3); //object

console.log(typeof f1); //function

console.log(typeof f2); //function

console.log(typeof f3); //function

2.原型对象

js每定义一个对象后，都会有几个预定义属性，其中函数对象的一个属性就是原型对象prototype。普通对象没有prototype！普通对象和函数对象都有proto属性，但是null没有

2.1原型对象就是普通对象

image

2.2 每一个构造函数都会有一个ptototype，prototype这个对象的所有属性和方法都会被构造函数的实例所继承

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

Cat.sex ='女';

Cat.prototype.age ='12';

var *cat *=new Cat('大黄');

alert(cat.age);//12

alert(cat.sex);//undefine 也就是说明实例只能继承构造函数原型上的属性和方法

alert(cat.hasOwnProperty("name"));//hasOwnProperty判断是自己本身的属性还是继承的alert(cat.hasOwnProperty("age"));

image

2.3原型对象主要用作继承

原型链继承

  function SuperType() {

  this.val = 1;

  this.color = ['red','green','blue'];

}

function SubType() {

}

SubType.prototype = new SuperType(); //原型继承核心代码

var sub1 = new SubType() ;

var sub2 = new SubType() ;

sub1.val = 2;

sub1.color.push('black');

console.log(sub1.val); //2

console.log(sub2.val); //1

console.log(sub1.color); // ["red", "blue", "green", "black"]

console.log(sub2.color); // ["red", "blue", "green", "black"]

缺点：原型继承的问题所在是简单的赋值没有问题 问题在于引用会执行同一个地址 一个对象的改变会导致另外一个对象的地址改变

2.4 instanceof的作用

首先贴出js数据类型和对象，因为经常混淆

image

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性，也就是左侧是右侧类的时候才会返回true,instanceof操作符要求左边的是一个对象,instanceof是判断一个对象是否由某个构造器函数生成，即前提条件是:instanceof左边要是对象，右边要是函数

var aa="aa";

alert(aa instanceof String); //false         因为aa只是一个以string为数据类型的值 并不是String的实例对象

利用构造函数String来新建一个字符串对象

var b=new String(aa);

alert(b instanceof String);  //ture

下文会解析instanceof源码😎

3.原型链

每一个对象，无论是函数对象还是普通对象都有一个叫做proto的内置属性，用于指向创建它的函数对象的原型对象prototype，例如

image

f1的原型对象prototype的proto是Object.prototype

image

Object.prototype对象也有proto属性，但它比较特殊，为null console.log(Object.prototype.proto) //null

下面一张图帮助我们更好理解他们之间的关系（要时常画一画）

蓝色代表原型链

4.constructor

原型对象ptototype都有个预定义的constructor属性，这是一种循环引用,它保存着创建当前对象的函数

person.prototype. constructor === person //true

Function.prototype.constructor === Function //true

Object.prototype.constructor === Object //true

image

5.总结误区：原型链的真正形成是靠的proro，而不是prototype

var animal = function(){};

var dog = function(){};

animal.num = 200;//

dog.prototype = animal;

var dog1 = new dog();

console.log(dog. num)  //undefined

console.log(dog1.num)  // 200

虽然dog的prototype指向的animal有这个属性，但它并没有去沿着这个“链”去寻找，而dog1.num会沿着proto去查找，查到animal的原型对象就查到了num的值

6. 为了验证学习质量

<1> new实现原理

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

  this.habit = 'Games';
}

new1.prototype.strength = 60;

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

function objectFactory() {
  var obj = new Object();
  var [Constructor, ...args] = [ ...arguments];
  obj.__proto__ = Constructor.prototype;
  Constructor.apply(obj, args);
  
  return obj;
};

var person = objectFactory(new1, 'lala', '18')

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

person.sayName(); // I am lala 

<2>Object.create原理

方法里面只有一个参数的时候用作继承

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

第一个参数为null的时候说明将null复制给return的对象 实现一个纯净的对象

这也是在Vue和Vuex的源码中，作者为什么都使用Object.create(null)来初始化一个新对象

var o = Object.create(null,{  // 第二个参数和Object.defineProperty的第二个参数一样，set值覆盖原有的值
   a: { 
        writable:true,
        configurable:true,
        value:'1'
    }
})
console.log(o)

第一个参数传null

<3> instanceof 原理 直接上代码 走你😎

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

function Student(score){
    this.score = score;
}

Student.prototype = new Person('李明',22);
var s = new Student(99);

console.log(s instanceof Student);  //true
console.log(s instanceof Person);  //true
console.log(s instanceof Object);  //true

function _instanceof(A, B) {
    var O = B.prototype;// 取B的显示原型
    A = A.__proto__;// 取A的隐式原型
    while (true) {
        //Object.prototype.__proto__ === null
        if (A === null)
            return false;
        if (O === A)// 这里重点：当 O 严格等于 A 时，返回 true
            return true;
        A = A.__proto__;
    }
}

原谅我盗图。。。

7. 补充Function构造函数

String.__proto__===Function.prototype//true
Number.__proto__===Function.prototype//true
Boolean.__proto__===Function.prototype//true

Object.__proto__ === Function.prototype//true

不只是上述构造函数,实际上,
任意函数的proto都===Function.prototype

关于Function 最奇特 的是

Function.__proto__=== Object.Protoype//false
Function.__proto__=== Function.Prototype//true

因为 所有函数实例.proto就是Function构造函数的原型(Function.Prototype),函数而函数实例也包括他自己.

Function也可以看作是String()或者Boolean()或Number()同等地位
因为所有函数.prototype虽然是实例原型,但是实例原型本质还是一个对象,也就是说所有的实例原型对象是Object()构造函数的实例,即

String.prototype.__proto__=== Object.prototype//true
Number.prototype.__proto__=== Object.prototype//true
Boolean.prototype.__proto__=== Object.prototype//true
//同理
Function.prototype.__proto__=== Object.prototype//true

Function总结:
如果把函数看成对象，那么函数.proto === Function.prototype
如果把 Function 看成对象，那么 Function.proto === Function.prototype

一张大图总结

Function.prototype.a = 1;
Object.prototype.b = 2;
var Func = function(){};
var f = new Func();
console.log(f.a, f.b) //undefined 2

f是new出来的Object实例 因此继承的Object原型 和Function毛关系没有