IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript 原型与原型链 -> 正文阅读

[JavaScript知识库]JavaScript 原型与原型链

在JavaScript中是使用构造函数来新建一个对象的,每一个构造函数的内部都有一个 prototype 属性,它的属性值是一个对象,这个对象包含了可以由该构造函数的所有实例共享的属性和方法。当使用构造函数新建一个对象后,在这个对象的内部将包含一个指针,这个指针指向构造函数的 prototype 属性对应的值,在 ES5 中这个指针被称为对象的原型。一般来说不应该能够获取到这个值的,但是现在浏览器中都实现了 __proto__ 属性来访问这个属性,但是最好不要使用这个属性,因为它不是规范中规定的。ES5 中新增了一个 Object.getPrototypeOf() 方法,可以通过这个方法来获取对象的原型。

当访问一个对象的属性时,如果这个对象内部不存在这个属性,那么它就会去它的原型对象里找这个属性,这个原型对象又会有自己的原型,于是就这样一直找下去,也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype 所以这就是新建的对象为什么能够使用 toString() 等方法的原因。

1. 构造函数

function Person(name) {
  this.name = name
}
let person = new Person('Alan')

一般情况下,我们将构造函数的首字母大写。
这里的Person就是person的构造函数

2. prototype和__proto__

person.__proto__Person.prototype指向同一个对象,这个对象包含了该构造函数的所有实例共享的属性和方法。
Person.prototype也是一个对象,所以他也存在一个__proto__属性,指向他的原型。
我们观察下面的代码:

function Person(name) {
  this.name = name
}
let p = new Person('hello')
console.log(p.__proto__ === Person.prototype)        // true

值得注意的是,一个原型对象被该构造函数的所有实例共享,所以,当我们写了p.__proto__.age=19,会给所有Person对象都增加了一个属性值为19的age属性。

3. constructor

每个原型对象中包含了共享属性和方法,共享属性中有一个constructor属性,这个属性是构造函数的一个引用。

console.log(p.constructor)	//[Function: Person]

值得注意的是,虽然我们可以通过p.constructor获取到构造函数,但是constructor是存在于p的原型中作为共享属性而存在的。
所以下面的输出就很明确了:

console.log(p.hasOwnProperty('constructor'))	//false
console.log(p.__proto__.hasOwnProperty('constructor'))	//true

4. 更改原型

Person.prototype.getName = function() { return this.name }	//增加方法
p.__proto__.age = 19	//增加属性

注意,当我们在原型上增加了age属性之后,此时的age=19可以说是每个Person实例的默认age属性值,观察下面代码:

p.__proto__.age = 19
console.log(p.hasOwnProperty('age'))	//false
p.age = 20
console.log(p.hasOwnProperty('age'))	//true
console.log(p.age, p.__proto__.age)		//20 19

这里的p.age = 20其实并不是更新了p的age值,而是为p增加了一个age属性,其属性值为20。

再次观察下面的代码:

function Person(name) {
  this.name = name
}
let p = new Person('Alan')
// 修改原型
Person.prototype = {
  age: 19,
  setAge: function (age) {
    this.age = age
  }
}

console.log(p.age)

这里会输出什么呢?
我们以对象字面量的方式给Person.prototype赋值,这时就不再会影响p.__ptoto__指向的值了:
在这里插入图片描述
所以,下面的代码该如何输出呢?

console.log(p.__proto__ === Person.prototype)	//false
console.log(p.__proto__.constructor)			//[Function: Person]
console.log(Person.prototype.constructor)		//[Function: Object]

此时的Person.prototypep.__proto__就不再指向同一个原型了,这种情况是很危险的,但是,某些情况,我们需要向Person.prototype直接赋值,这时候,我们还需要重新设置Person.prototype.constructor=Person,实例化对象需要在这一步之后再进行!
在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-04-09 18:14:27  更:2022-04-09 18:18:49 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 2:44:10-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码