具体:https://github.com/febobo/web-interview
9.原型与原型链
①原型
在JavaScript中,每个函数都有一个prototype
对象,它包含可以被所有实例共享的属性和方法。
function Person(name, age) {
this.name = name;
this.age = age;
}
// 在 Person 函数的 prototype 上定义一个方法
Person.prototype.sayHello = function() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
// 实例化一个 Person 对象
const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);
// 调用通过原型定义的方法
person1.sayHello(); // 输出 "Hello, my name is Alice and I am 30 years old."
person2.sayHello(); // 输出 "Hello, my name is Bob and I am 25 years old."
此外,原型对象包含一些默认的属性和方法,准确地来说,原型的属性和方法定义在Object的构造函数之上的prototype
属性上,而非实例本身。
function doSomething(){}
console.log( doSomething.prototype );
输出
{
constructor: ƒ doSomething(),
__proto__: {
constructor: ƒ Object(),
hasOwnProperty: ƒ hasOwnProperty(),
isPrototypeOf: ƒ isPrototypeOf(),
propertyIsEnumerable: ƒ propertyIsEnumerable(),
toLocaleString: ƒ toLocaleString(),
toString: ƒ toString(),
valueOf: ƒ valueOf()
}
}
原型对象有一个自有属性constructor
,这个属性指向该函数,如下图关系展示
②原型链
在 JavaScript 中,每个对象都有一个指向其原型(prototype)的引用,这个原型对象也是一个对象,它也有自己的原型,以此类推,形成了一个链式结构,即原型链。
在对象实例和它的构造器之间建立一个链接(它是__proto__
属性,是从构造函数的prototype
属性派生的),之后通过上溯原型链,在构造器中找到这些属性和方法。
function Person(name) {
this.name = name;
this.age = 18;
this.sayName = function() {
console.log(this.name);
}
}
// 第二步 创建实例
var person = new Person('person')
- 构造函数
Person
存在原型对象Person.prototype
- 构造函数生成实例对象
person
,person
的__proto__
指向构造函数Person
原型对象 Person.prototype.__proto__
指向内置对象,因为Person.prototype
是个对象,默认是由Object
函数作为类创建的,而Object.prototype
为内置对象Person.__proto__
指向内置匿名函数anonymous
,因为 Person 是个函数对象,默认由 Function 作为类创建Function.prototype
和Function.__proto__
同时指向内置匿名函数anonymous
,这样原型链的终点就是null
每个对象的__proto__
都是指向它的构造函数的原型对象prototype
的
person1.__proto__ === Person.prototype
构造函数是一个函数对象,是通过 Function
构造器产生的
Person.__proto__ === Function.prototype
原型对象本身是一个普通对象,而普通对象的构造函数都是Object
Person.prototype.__proto__ === Object.prototype
刚刚上面说了,所有的构造器都是函数对象,函数对象都是 Function
构造产生的
Object.__proto__ === Function.prototype
Object
的原型对象也有__proto__
属性指向null
,null
是原型链的顶端
Object.prototype.__proto__ === null
下面作出总结:
- 一切对象都是继承自
Object
对象,Object
对象直接继承根源对象null
- 一切的函数对象(包括
Object
对象),都是继承自Function
对象 Object
对象直接继承自Function
对象Function
对象的__proto__
会指向自己的原型对象,最终还是继承自Object
对象