原型、原型链都不知道还怎么指望大厂

什么是原型？

  Javascript 只有一种结构，那就是：对象。在 javaScript 中，每个对象都有一个指向它的原型（prototype）对象的内部链接。这个原型对象又有自己的原型，直到某个对象(Object)的原型为 null 为止（也就是不再有原型指向），组成这条链的最后一环。这种一级一级的链结构就称为原型链。
  通过下面的代码我们一起来认识一下原型：

 //创建一个数组，调用原型的方法
let arr=["后盾人"];
console.log(arr.concat("houdunren.com"));

//创建两个对象，同属一个原型
let obj1 = {};
let obj2 = {};
console.log(Object.getPrototypeOf(obj1) == Object.getPrototypeOf(obj2));

  简单来说，原型就是JS继承的基础。原型和对象的关系相当于父亲和孩子。需要注意的是：

• 每个函数都有个prototype属性，它指向空的Object对象(原型对象)
• 原型对象中包含constructor属性指向构造函数

function User(){}
console.log(User.prototype)
console.log(User.prototype.constructor == User)

  程序执行结果：

没有原型的对象

  没有原型的对象，完全的数据字典.使用Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。

    let obj1 = Object.create(null,{
        name:{
            value:"后盾人"
        }
    });
    console.log(obj1.hasOwnProperty("name"));

  执行上述代码后会报错，原因在于通过没有提供新创建对象的__proto__，上述创建的对象中只有name属性，不存在原型，也无法调用hasOwnProperty方法。若将代码中的null改为其他函数或者Object对象，则最后结果为true。

自定义对象的原型

let obj1={name:"houdunren1"};
let obj2={name:"houdunren2",show(){
     console.log(this.name);
}}
//设置obj1的原型为obj2
Object.setPrototypeOf(obj1,obj2);
obj1.show();
obj2.show();
console.log(Object.getPrototypeOf(obj1))

程序运行结果如下：

prototype和__proto__的区别

• 每个函数都有一个prototype即显式原型属性（原型对象，函数定义时添加此属性）
• 每个实例对象都有一个__proto__即隐式原型属性（创建实例对象时添加此属性）
• 实例对象的__proto__(隐式原型)等于其构造函数的prototype(显式原型)

//对象的隐式原型=构造函数的显式原型
function User(){};
let obj1=new User(); //Object
console.log(obj1.__proto__ == User.prototype)//true
console.log(obj1.prototype == User.prototype)//false

程序图示：

什么是原型链？

  通俗地讲，访问一个对象属性或方法时浏览器本身会先在自身属性或方法中查找，若找到则返回。若没有找到再沿着__proto__(原型)这条链向上查找，找到返回。若最终没有找到，则返回undefined。

function User(name){
	this.name=name;
};
let obj1=new User("hello");
console.log(obj1);

程序图示：

原型方法与对象方法优先级

    let obj1={
        show(){
            console.log("show");
        },
        render(){
            console.log("render");
        }
    };
    console.log(obj1.__proto__)
    console.dir(obj1)
    obj1.__proto__.render=function(){
        console.log("原型render")
    }
    obj1.render();

  程序执行结果为：，说明对象中方法的优先级高于原型中方法的优先级，也就是说如果创建的实例对象调用某个方法，会先去对象中找，若没有去该对象的原型对象（父亲）中找。

需要注意的是，console.log()和console.dir()的区别

console.log()会在浏览器控制台打印出信息
console.dir()可以显示一个对象的所有属性和方法