1. 首页
  2. IT资讯

js原型那些你不知道的事儿

关键词

原型, 原型对象, 构造函数·
__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

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/203767.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code