【JavaScript】通过一个例子认识prototype,constructor和instanceof

曾经终败给现在 2022-06-04 03:18 163阅读 0赞

面试题是这样的：

本示例是本人在全屏浏览器状态下测试的，看不清可[在新窗口打开][Link 1]

![这里写图片描述][Link 1]

--------------------

## prototype 与 \_\_proto\_\_的区别 ##

*  prototype是函数才有的属性
 *  \_\_proto\_\_是每个对象都有的属性

> 注：大多数情况下，\_\_proto\_\_可以理解为“构造器的原型”，即\_\_proto\_\_ === constructor.prototype（但通过Object.create()创建的对象不适用此等式）

## \_\_proto\_\_指向哪里？ ##

/*1、字面量方式*/
    var a = {};
    console.log(a.__proto__);  //Object {}
    
    console.log(a.__proto__ === a.constructor.prototype); //true
    
    /*2、构造器方式*/
    var A = function(){};
    var a = new A();
    console.log(a.__proto__); //A {}
    
    console.log(a.__proto__ === a.constructor.prototype); //true
    
    /*3、Object.create()方式*/
    var a1 = {a:1}
    var a2 = Object.create(a1);
    console.log(a2.__proto__); //Object {a: 1}
    
    console.log(a.__proto__ === a.constructor.prototype); //false（此处即为图1中的例外情况）

## constructor ##

constructor的值是一个函数。在JavaScript中，除了null和undefined外的类型的值、数组、函数以及对象，都有一个constructor属性，constructor属性的值是这个值、数组、函数或者对象的构造函数。如：

## 原型 ##

> 注意：\_\_proto\_\_连接的是实例与构造函数的原型对象之间，而不是实例与构造函数之间。

## 原型链 ##

在JavaScript中，原型链是实现**继承**的主要方式。

JavaScript引擎在访问对象的属性时，会先在对象本身中查找，如果没有找到，则会去原型链中查找（但不会查找自身的prototype），如果找到，则返回值，如果整个原型链中都没有找到这个属性，则返回undefined。

## 原型对象 与 prototype ##

构造函数有一个prototype属性，指向实例对象的原型对象。通过同一个构造函数实例化的多个对象具有相同的原型对象。经常使用原型对象来实现继承。

function Foo(){ };
    Foo.prototype.a = 1;
    var f1 = new Foo;
    var f2 = new Foo;
    
    console.log(Foo.prototype.a);//1
    console.log(f1.a);//1
    console.log(f2.a);//1

## 原型 与 实例 ##

有两种方式来确定原型和实例之间的关系：

*  使用instanceof操作符

function Person(){ }
    
    var person = new Person();
    
    console.log(person instanceof Object);  // true
    console.log(person instanceof Person);  // true

*  使用isPrototypeOf()方法。

console.log(Object.prototype.isPrototypeOf(person)); // true
    console.log(Person.prototype.isPrototypeOf(person)); // true

[Link 1]: /images/20220604/8bd5ed9961d34bda9ca2a3e28c0dd292.png