深入理解原型、原型链

it2022-05-09  34

前面的话

学前端,在JavaScript上面花再多的时间都不为过。 这篇文章将介绍原型、原型链

什么是构造函数

构造函数与普通函数的区别:

首写字母大写调用方式:使用new操作符调用 function Person(name, age) { this.name = name; this.age = age; } var p = new Person('wan', 20);

Symbol属于构造函数吗?

Symbol是es6新增的一种基本数据类型,但它不是完整的构造函数,因为它不支持new操作符,Chrome认为其不是构造函数,如果想生成实例,直接使用Symbol()来生成。

var x = new Symbol(123); // Uncaught TypeError: Symbol is not a constructor var y = Symbol(123);

constructor属性

每个函数的实例都有constructor属性,它返回的是创建实例对象的构造函数(是构造函数本身的引用,而不是函数名称的字符串)。

function Person(name, age) { this.name = name; this.age = age; } var p = new Person('wan', 20); console.log(p.constructor); console.log(p.constructor == Person);

普通函数的实例对象也有constructor属性。大部分对象都具有这个属性。(Object.create(null)创建的实例对象没有)

var a = Object.create(null); console.log(a.constructor);

参数为null的对象没有constructor属性。下面为讲到这方法 普通函数的实例也有constructor属性:

function person() { return { age: 20 } } var a = person(); console.log(a.constructor);

基本数据类型:比如数字、字符串、布尔值(true/false)、Symbol()实例都具有constructor属性,null与undefined没有

// 数字 console.log((1).constructor); // 字符串 console.log('123'.constructor); // 布尔值 console.log((true).constructor); // Symbol(123)实例 console.log(Symbol(123).constructor);

那么这些constructor属性来自哪呢?例如(1).constructor是来自Number原型上的,即Number.prototype.constructor. 其他4个也是如此。

constructor属性是否只可读?

constructor属性对象引用类型的对象是可以修改的,但对于基本数据类型只是可读的

[引用类型]

function Bar(){} function Foo(name) { this.name = name; } var f = new Foo('wan'); console.log(f.constructor); f.constructor = Bar; console.log(f.constructor);

[基本的包装类型也是可以修改的]

var X = new Number(1); console.log(X.constructor); X.constructor = Bar; console.log(X.constructor);

[基本数据类型只读]

console.log((1).constructor); (1).constructor = Bar; console.log((1).constructor);

同理,对于其他基本数据类型也是只可读

prototype属性

无论什么时候,只要创建一个新的函数,就会为该函数创建一个prototype属性,每一个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,这个对象就是原型对象。原型对象的用途是:包含可以由特定类型的所有实例共享的属性和方法。

function Person1(name) { this.name = name; } var K = new Person1(); console.log(Person1.prototype); console.log(Person1.prototype.constructor == Person1);

[普通函数]

function person1(name) { return { name:name } } var k = person(); console.log(person1.prototype); console.log(Person1.prototype.constructor == Person1);

我们可以看到函数的prototype属性指向的是一个对象,并且该对象有两个属性:constructor属性__ proto__属性,其中 __ proto__ 已被弃用。constructor属性指向的是调用prototype属性的函数。

构造函数Person1有一个指向原型对象指针(prototype属性),Person1.prototype原型对象有一个指向构造函数的指针(constructor属性)

__ proto__

当调用构造函数创建一个实例时,该实例的内部将包含一个指针(内部属性),指向构造函数的原型对象,ECMA5管这个指针叫[[prototype]],但是外部的代码无法访问。但Firefox、Safari、Chrome在每个对象上都支持属性__ proto__.

给上例添加两行代码:

console.log(K); console.log(K.__proto__ === Person1.prototype);

每个对象都有一个__proto__属性,上例中返回的K实例中有一个__proto__属性,它指向的也是一个对象,与Person1.prototype指向的对象一样。

这里用 K.proto 获取对象的原型,prototype 是构造函数的属性,这两个并不一样,但 K.proto 和 Person1.prototype 指向同一个对象。

Object.create()

另一种创建构造函数实例的方法,它既可以创建一个构造函数实例,并且可以传入参数,这个参数要么是对象,要么为null

function Person2(age) { this.age = age } var N = new Person2(20); var n = Object.create(N); console.log(n.__proto__);

如果参数是null,那么对象n将是一个空对象,并且这个对象将没有原型

var g = Object.create(null); console.log(g.__proto__);

原型链

每个对象都有一个原型,通过__proto__指针指向上一个原型,一层一层到Object.prototype ,最终到null。这种关系被称为原型链 (prototype chain).

console.log(N.__proto__ === Person2.prototype); console.log(N.__proto__.__proto__ === Object.prototype); console.log(N.__proto__.__proto__.__proto__ === null);

关系图:


最新回复(0)