一.构造函数

1.对象

众所周知，JS是面向对象编程的弱类型语言，对象几乎涵盖了JS的所有----------万物皆对象。

那么创建对象的方式有哪些呢？

方法一：

通常object的代码表现形式是{}，所以我们可以直接如下，定义一个对象

var obj={
    name:'龙儿哥哥',
    age:26,
    SayHi:function(){
        console.log('龙儿哥哥向你打了一个招呼！');
    }
}
obj.age;//26
obj.Say();//龙儿哥哥向你打了一个招呼

方法二：

我们知道，创建一个日期对象，数组等使用的是new关键字进行创建，同样，普通对象也能使用new关键字创建。

var obj=new Object();
obj.name="龙儿哥哥";
obj.age=26;
obj.SayHi=function(){
    console.log('龙儿哥哥向你打了一个招呼！');
}

方法三：

区别于传统意义上的对象，这里我们要使用一个函数创建一个对象-------------构造函数，这也是这一章节的重点。

  function person(){
    this.name = '龙儿哥哥'
  }
  let pers = new person()
  console.log(pers.name);//龙儿哥哥

二.什么是原型

为了直观的让同学们理解，一下我将举几个例子来说明。

第一节：

1.通过第一章第3小结，我们知道通过构造函数创建的对象，我们可以用‘.’的形式访问对象属性。

2.JS引擎的__proto__方法会指向对象的原型

  function Person(){
    this.name = '龙儿哥哥'
  }
  let pers = new Person()
  console.log(pers);
  console.log(pers.__proto__);

以上结果打印在控制台输出以下内容

# 通过打印pers,可以清晰的看到pers是一个对象，其下有一个name属性，值为'龙儿哥哥'，其实pers就是一个实例对象，name则为这个实例对象pers的实例属性。

# 通过第二条，我们打印了pers.__proto__，所以打印结果指向的是pers这个实例对象的原型。通过以上代码和打印结果我们知道红色框内的是一摸一样的数据，也就是说这两个红色框内的东东就是pers实例对象的原型。

#可以看到这个原型中存在两个属性：

一个是construtor，其值为Person这个函数，由此可见这个construtor指向的就是这个构造函数本身。

第二个使用[[]]包裹的Prototype属性，其值为Object，这个prototype就是pers这个实例对象的原型对象。

三.原型对象

1.第二章我们通过构造函数和new关键字知道了什么是实例对象，什么是原型，什么是原型对象以及__proto__的指向问题，这一章我们就深入理解实例对象，原型对象以及他们的关系。

现在我们给pers实例对象的原型对象上创建了一个name属性，打印结果如右图所示。

可以看到两者都有一个name属性。我们知道如果去掉Person.prototype.name = '龙哥'这行代码，我们打印pers.name,那么结果肯定是“龙儿哥哥”。

例1 那么现在打印pers.name是什么呢，思考5秒，接着看下图和你预想的有没有偏差？

例2 到这儿的时候可能你有点疑惑，不过没关系，接着往下看

2.从上面两个例子中，我们得出了以下结论：

（1）从例1中知道，我们访问一个对象属性的时候优先访问对象的实例属性，也就是上面的this.name，如果没有，则访问其原型对象属性，如例2中的age。

（2）无论是绑定在原型对象或是实例对象上的属性，我们都可以直接访问到。

四.原型链

1.通过前三章，我们应该能理解什么是构造函数，什么是实例对象，什么是原型，什么是原型对象了。啥？不明白？那这里简要的再说一下吧！！！

# 构造函数（非箭头函数）------对应上面的Person函数，这个函数跟我们普通调用的函数是一摸一样的。

# 实例对象 ------ 通过关键字new + 函数 （new Person）创建的对象就是实例函数，当然我们通过new Object()，{}，创建的都是实例对象。

# 原型 ------ 实例对象通过关键字__proto__(pers.__proto__)访问到的对象就是原型，原型中包括原型对象（prototype）和构造函数，这个构造函数就是我们最开始创建的那个函数（Person）。

# 原型对象 ------ 我们通过构造函数.prototype访问到的对象就是原型对象（Person.prototype）

2.知道上面的那些关系了，我们再来聊一聊什么是原型链。

如上图所示，你可以把这些线（也就是关系）理解成原型链。

由此可见原型链就这么简单？of course NOT!!!!!

3.我们知道__proto__指向的是一个实例对象的原型，那么原型对象的__proto__指向的是谁呢？

由上图所示，

# 我们访问实例对象的原型的时候，这个构造函数和prototype就是他的原型。

# 我们访问原型的原型的时候，可以看到有许多方法，这其实是浏览器JS引擎内置的方法。这些合起来就是原型的原型，这也是为什么我们能使用许多原生JS方法的原因，大家不妨点看看看这些方法的构造。

# 我们访问原型的原型的原型的时候，其直为null，也就是我们通过__proto__不断寻找父，最终的结果指向的就是null。

4.如果你认为原型链就这么点，就错了。如果我们指定某一个实例为另一个实例的原型呢？------如下图所视。

打印结果如下

也就是实例可以指定原型的,而依次向下查找其父，最终的结果依然指向null。---------如下图所示

总结：

原型链是：实例对象、构造函数、原型对象、原型之间的关系。

结语：以上就是我们前端同学必须掌握的原型链，当然还有对象的赋值，继承，深拷贝和浅拷贝，这里就不做说明了，同学们自行尝试一下。

标签：__,对象,JS,pers,实例,原型,构造函数
From： https://www.cnblogs.com/longc-box/p/17022508.html

JS原型链