AI生成--原型与原型链

原型（prototype）

在 JavaScript 中，每一个对象都有一个内部属性 [[prototype]]，也可以称之为原型。原型是一个对象或 null。当我们访问一个对象的属性或方法时，如果对象本身没有这个属性或方法，那么 JavaScript 引擎会去对象的原型链上查找。也就是说，对象的原型链上的对象都可以为该对象提供属性和方法。

每一个构造函数（除了箭头函数）都有一个原型对象。我们可以通过构造函数的 prototype 属性来访问该原型对象。因此，所有通过该构造函数创建的对象都共享该原型对象。

示例代码：

function Person(name) {this.name = name;
}Person.prototype.sayHello = function() {console.log("Hello, I'm " + this.name);
}const person1 = new Person("Alice");
person1.sayHello(); // "Hello, I'm Alice"const person2 = new Person("Bob");
person2.sayHello(); // "Hello, I'm Bob"

在上面的代码中：

Person 是一个构造函数，它有一个原型对象 Person.prototype。
Person.prototype 中定义了一个方法 sayHello。
通过 new 关键字使用 Person 构造函数创建了两个对象 person1 和 person2。
person1 和 person2 都可以调用 sayHello 方法，因为它们都从 Person.prototype 原型对象上继承了该方法。

原型链（prototype chain）

JavaScript 中的原型链是一种对象间的委托关系。当我们访问一个对象的属性或方法时，如果该对象本身没有该属性或方法，那么 JavaScript 引擎会沿着该对象的原型链依次查找，直到找到该属性或方法或找到原型链的顶端 Object.prototype（Object.prototype 是所有对象的根原型对象，它的 [[prototype]] 属性为 null）为止。

示例代码：

function Person(name) {this.name = name;
}Person.prototype.sayHello = function() {console.log("Hello, I'm " + this.name);
}const person = new Person("Alice");console.log(person.hasOwnProperty("name")); // true
console.log(person.hasOwnProperty("sayHello")); // false
console.log(Person.prototype.hasOwnProperty("sayHello")); // true
console.log(person.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null

在上面的代码中：

person 对象的 name 属性是它自己的属性，因此 person.hasOwnProperty("name") 返回 true。
person 对象的 sayHello 方法不是它自己的属性，而是它的原型对象 Person.prototype 的属性，因此 person.hasOwnProperty("sayHello") 返回 false。
Person.prototype 的 sayHello 方法是它自己的属性，因此 Person.prototype.hasOwnProperty("sayHello") 返回 true。
person.__proto__ 指向 Person.prototype，因此 person.__proto__ === Person.prototype 返回 true。
Person.prototype.__proto__ 指向 Object.prototype，因此 Person.prototype.__proto__ === Object.prototype 返回 true。
Object.prototype.__proto__ 为 null，因为它没有更高层的原型对象，所以 Object.prototype.__proto__ 返回 null。

AI生成--原型与原型链相关推荐

js原型和原型链_JS里的原型和原型链
JS里的原型与原型链原型原型和原型链的目的是解决构造函数生成的对象内共同属性重复生成的问题,使其更高效.在下面这个例子里每次生成一个实例对象都要生成一个mmm方法,没有必要,完全可以共享. 构造函 ...
关于javascript的原型和原型链，看我就够了（二）
温故创建对象的三种方式通过对象直接量通过new创建对象通过Object.create() js中对象分为两种函数对象普通对象仔细观察如下代码 function Foo(name) {th ...
的函数原型_JS基础函数、对象和原型、原型链的关系
JS的原型.原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对 ...
详解面向对象、构造函数、原型与原型链
详解面向对象.构造函数.原型与原型链为了帮助大家能够更加直观的学习和了解面向对象,我会用尽量简单易懂的描述来展示面向对象的相关知识.并且也准备了一些实用的例子帮助大家更加快速的掌握面向对象的真谛. ...
Object.prototype 原型和原型链
Object.prototype 原型和原型链原型 Javascript中所有的对象都是Object的实例,并继承Object.prototype的属性和方法,有些属性是隐藏的.换句话说,在对象创建 ...
小汤学编程之JavaScript学习day04——自定义对象、原型与原型链、BOM
一.自定义对象 1.对象的定义 2.对象的使用二.原型与原型链 1.JS的继承结构图 2.关键点三.BOM 1.window对象 2.document对象 3.lo ...
深入学习js之——原型和原型链
开篇: 在Brendan Eich大神为JavaScript设计面向对象系统的时候,借鉴了Self 和Smalltalk这两门基于原型的语言,之所以选择基于原型的面向对象系统,并不是因为时间匆忙,它 ...
JavaScript重难点解析3（原型与原型链、执行上下文与执行上下文栈）
JavaScript重难点解析3(原型与原型链.执行上下文与执行上下文栈) 原型与原型链原型(prototype) 显示原型与隐式原型原型链 instanceof是如何判断执行上下文与执行上下文 ...
JavaScript深入之从原型到原型链
JavaScript深入系列的第一篇,从原型与原型链开始讲起,如果你想知道构造函数的实例的原型,原型的原型,原型的原型的原型是什么,就来看看这篇文章吧. 构造函数创建对象我们先使用构造函数创建一个对 ...

AI生成--原型与原型链

AI生成--原型与原型链相关推荐

最新文章

热门文章