关于前端:js原型那些你不知道的事儿

47次阅读

共计 2389 个字符,预计需要花费 6 分钟才能阅读完成。

关键词

原型,原型对象,构造函数

·
__proto__,prototype,constructor,

  1. prototype:每个函数都会有这个属性,这里强调,是函数,一般对象是没有这个属性的(这里为什么说一般对象呢,因为 JS 外面,所有皆为对象,所以这里的一般对象不包含函数对象)。它指向构造函数的原型对象;
  2. __proto __:每个对象都有这个属性,这里强调,是对象,同样,因为函数也是对象,所以函数也有这个属性。它指向构造函数的原型对象;
  3. constructor:这是原型对象上的一个指向构造函数的属性。

function Person(){}

let p=new Person(); 

typeof p // object

p 是 Person 的实例对象,Person 是构造函数(个别是首字母大写),
构造函数 Person 有个属性 prototype,指向其原型对象 Person.prototype 打印进去是 {constructor: ƒ};
<font color=”#0e88eb” size=”4″> 实例对象 p 有个属性__proto__, 指向 p 的构造函数的的原型对象 </font>


p.__proto__ ===Person.prototype; 
//true

constructor

<font color=”#0e88eb” size=”4″> 实例 p 的属性 constructor,指向其构造函数 </font>

p.constructor===Person;  //true
Person.constructor  //ƒ Function() { [native code] }

从下面代码看出 Person 的 constructor 指向 Function, 所以构造函数 Person 是依据 Function 所创立进去的。

再看:

Object.constructor // 打印:ƒ Function() { [native code] }

是不是很惊奇

Function instanceof Object; // true
Object instanceof Function; // true

指向示例

    function Person() {}
    var p = new Person()
    console.log(Person.prototype); // Object{} 
    console.log(p.prototype); // undifined
    console.log(p.constructor); //function Person(){}    
   // 此处的 p 是通过 Person 函数结构进去的,所以 p 的 constructor 属性指向 Person
    console.log(Person.constructor); //ƒ Object() { [native code] }
    p.__proto__===Person.prototype; //true
    p.constructor===Person;   //true
  

延长:
之前提过,每个函数其实是通过 new Function()结构的,每个对象都是通过 new Object()结构的

    ({}).constructor; // 打印进去是 Object 即是 ƒ Object() { [native code] }
    ({}).constructor.constructor; //ƒ Function() { [native code] } 即 Function
  所以
     Object.constructor===Function //true
 数组也是
     Array.constructor===Function  //true
   .............  分割线
     Object.__proto__===Object.constructor.prototype; //true 
  相当于
     Object.__proto__===Function.prototype; 
   ............   分割线
    Object.prototype=== Function.prototype.__proto__ ;  //true
  咱们晓得
    Object.prototype === ({}).__proto__  ;  //true
  相当于
   ({}).__proto__=== Function.prototype.__proto__;  //true
  然而
    {} === Function.prototype;  //false
    Function.prototype;  // 打印进去是ƒ () { [native code] }
   

Object 打印进去就是就是 ƒ Object() { [native code] }
Array 打印进去就是 ƒ Array() { [native code] }
Function 打印进去就是就是 ƒ Function() { [native code] }

<font color=”#0e88eb”>Object 也是一个函数,它是 Function()结构的; Function=> ƒObject() { [native code] </font>

Object 既有__proto__属性,也有 prototype 属性

Object.__proto__===Function.prototype; //true
Object.prototype===({}).__proto__;  //true

上面理解下

function Person() {}
var p = new Person()
Person.prototype.constructor===Person  //true
p.constructor===Person //true
Person.prototype===p //false

想深刻理解原型的请戳:https://blog.csdn.net/weixin_44989478/article/details/108471066
想理解作用和原型链的请戳 *:https://www.cnblogs.com/unclekeith/p/5834289.html

k, 本文到此结束。最初揭示,请看下自己的昵称

正文完
 0