主页
  • 主页
  • 分类
  • 热文
  • 教程
  • 面试
  • 标签
JavaScript

JavaScript 基础

JavaScript 主页
JavaScript 概述
JavaScript 特性
JavaScript 启用
JavaScript 展示位置
JavaScript 语法
JavaScript hello_world
JavaScript console.log()
JavaScript 注释
JavaScript 变量
JavaScript let 语句
JavaScript 常量
JavaScript 数据类型
JavaScript 类型转换
JavaScript 严格模式
JavaScript 保留关键字

JavaScript 操作符

JavaScript 操作符
JavaScript 算术运算符
JavaScript 比较操作符
JavaScript 逻辑运算符
JavaScript 位运算符
JavaScript 赋值运算符
JavaScript 条件运算符
JavaScript typeof 运算符
JavaScript Nullish 合并运算符
JavaScript delete 运算符
JavaScript 逗号运算符
JavaScript 分组运算符
JavaScript Yield 运算符
JavaScript 扩展运算符
JavaScript 指数运算符
JavaScript 运算符优先级

JavaScript 控制流

JavaScript if...else 语句
JavaScript while 循环
JavaScript for 循环
JavaScript for...in 循环
JavaScript for...of 循环
JavaScript 循环控制
JavaScript break 语句
JavaScript continue 语句
JavaScript switch 语句
JavaScript 可迭代对象

JavaScript 函数

JavaScript 函数
JavaScript 函数表达式
JavaScript 函数参数和参数值
JavaScript 默认参数
JavaScript Function() 构造函数
JavaScript 函数提升
JavaScript 自执行函数
JavaScript 箭头函数
JavaScript 函数调用
JavaScript call() 方法
JavaScript apply() 方法
JavaScript bind() 方法
JavaScript 闭包
JavaScript 作用域
JavaScript 全局变量
JavaScript 智能函数参数

JavaScript 对象

JavaScript Number 对象
JavaScript Boolean 对象
JavaScript String 对象
JavaScript 数组对象
JavaScript 日期对象
JavaScript DataView 对象
JavaScript 处理程序
JavaScript Math 对象
JavaScript 正则表达式
JavaScript Symbol 类型
JavaScript Set 对象
JavaScript WeakSet 对象
JavaScript Map 对象
JavaScript WeakMap 对象
JavaScript 可迭代对象
JavaScript Reflect 对象
JavaScript TypedArray
JavaScript 模板字面量
JavaScript 标记模板

JavaScript 面向对象

JavaScript 对象
JavaScript 类
JavaScript 对象属性
JavaScript 对象方法
JavaScript 静态方法
JavaScript 显示对象
JavaScript 对象访问器属性
JavaScript 对象构造器
JavaScript 原型(Prototype)
JavaScript ES5 对象方法
JavaScript 封装
JavaScript 继承
JavaScript 抽象
JavaScript 多态
JavaScript 解构赋值
JavaScript 数组解构
JavaScript 嵌套解构
JavaScript 可选链
JavaScript 全局对象
JavaScript mixins
JavaScript 代理(Proxy)

JavaScript Cookies

JavaScript Cookies操作
JavaScript Cookie 属性
JavaScript 删除 Cookies

JavaScript 浏览器 BOM

JavaScript 浏览器对象模型(BOM)
JavaScript 窗口对象
JavaScript Document 对象
JavaScript 屏幕对象
JavaScript Window History 对象
JavaScript Navigator 对象
JavaScript Location 对象
JavaScript Console 对象

JavaScript Web APIs

JavaScript Web API
JavaScript History API
JavaScript 存储 API
JavaScript Forms API
JavaScript Worker API
JavaScript Fetch API
JavaScript 定位 API

JavaScript 事件

JavaScript 事件
JavaScript DOM 事件
JavaScript addEventListener()
JavaScript 鼠标事件
JavaScript 键盘事件
JavaScript 表单事件
JavaScript 窗口事件
JavaScript 事件委托
JavaScript 事件冒泡
JavaScript 事件捕获
JavaScript 自定义事件

JavaScript 错误处理

JavaScript 错误处理
JavaScript try-catch
JavaScript 调试
JavaScript 自定义错误
JavaScript 扩展错误

JavaScript 重要关键字

JavaScript this'关键字
JavaScript void 关键字
JavaScript new 关键字
JavaScript var 关键字

JavaScript HTML DOM

JavaScript HTML DOM
JavaScript DOM 方法
JavaScript 文档对象
JavaScript DOM 元素
JavaScript 文档表单
JavaScript 更改 HTML
JavaScript 更改 CSS
JavaScript DOM 动画
JavaScript DOM 导航
JavaScript DOM 集合
JavaScript 节点列表

JavaScript 杂项

JavaScript Ajax
JavaScript 异步迭代
JavaScript Atomics 对象
JavaScript 剩余参数
JavaScript 页面重定向
JavaScript 对话框
JavaScript 打印网页
JavaScript 表单验证
JavaScript 创建动画
JavaScript 多媒体
JavaScript 图像地图
JavaScript 浏览器兼容性
JavaScript JSON
JavaScript 多行字符串
JavaScript 浅拷贝
JavaScript 日期格式
JavaScript 获取日期方法
JavaScript 调用栈
JavaScript 引用类型
JavaScript 设置日期方法
JavaScript 模块
JavaScript IndexedDB
JavaScript clickjacking(点击劫持)
JavaScript 动态导入
JavaScript BigInt
JavaScript 柯里化(Currying)
JavaScript 图形库
JavaScript Blob
JavaScript Unicode
JavaScript 绘制图形
JavaScript 防抖
JavaScript 性能
JavaScript 编码规范

基础

JavaScript 主页
JavaScript 概述
JavaScript 特性
JavaScript 启用
JavaScript 展示位置
JavaScript 语法
JavaScript hello_world
JavaScript console.log()
JavaScript 注释
JavaScript 变量
JavaScript let 语句
JavaScript 常量
JavaScript 数据类型
JavaScript 类型转换
JavaScript 严格模式
JavaScript 保留关键字

操作符

JavaScript 操作符
JavaScript 算术运算符
JavaScript 比较操作符
JavaScript 逻辑运算符
JavaScript 位运算符
JavaScript 赋值运算符
JavaScript 条件运算符
JavaScript typeof 运算符
JavaScript Nullish 合并运算符
JavaScript delete 运算符
JavaScript 逗号运算符
JavaScript 分组运算符
JavaScript Yield 运算符
JavaScript 扩展运算符
JavaScript 指数运算符
JavaScript 运算符优先级

控制流

JavaScript if...else 语句
JavaScript while 循环
JavaScript for 循环
JavaScript for...in 循环
JavaScript for...of 循环
JavaScript 循环控制
JavaScript break 语句
JavaScript continue 语句
JavaScript switch 语句
JavaScript 可迭代对象

函数

JavaScript 函数
JavaScript 函数表达式
JavaScript 函数参数和参数值
JavaScript 默认参数
JavaScript Function() 构造函数
JavaScript 函数提升
JavaScript 自执行函数
JavaScript 箭头函数
JavaScript 函数调用
JavaScript call() 方法
JavaScript apply() 方法
JavaScript bind() 方法
JavaScript 闭包
JavaScript 作用域
JavaScript 全局变量
JavaScript 智能函数参数

对象

JavaScript Number 对象
JavaScript Boolean 对象
JavaScript String 对象
JavaScript 数组对象
JavaScript 日期对象
JavaScript DataView 对象
JavaScript 处理程序
JavaScript Math 对象
JavaScript 正则表达式
JavaScript Symbol 类型
JavaScript Set 对象
JavaScript WeakSet 对象
JavaScript Map 对象
JavaScript WeakMap 对象
JavaScript 可迭代对象
JavaScript Reflect 对象
JavaScript TypedArray
JavaScript 模板字面量
JavaScript 标记模板

面向对象

JavaScript 对象
JavaScript 类
JavaScript 对象属性
JavaScript 对象方法
JavaScript 静态方法
JavaScript 显示对象
JavaScript 对象访问器属性
JavaScript 对象构造器
JavaScript 原型(Prototype)
JavaScript ES5 对象方法
JavaScript 封装
JavaScript 继承
JavaScript 抽象
JavaScript 多态
JavaScript 解构赋值
JavaScript 数组解构
JavaScript 嵌套解构
JavaScript 可选链
JavaScript 全局对象
JavaScript mixins
JavaScript 代理(Proxy)

Cookies

JavaScript Cookies操作
JavaScript Cookie 属性
JavaScript 删除 Cookies

浏览器 BOM

JavaScript 浏览器对象模型(BOM)
JavaScript 窗口对象
JavaScript Document 对象
JavaScript 屏幕对象
JavaScript Window History 对象
JavaScript Navigator 对象
JavaScript Location 对象
JavaScript Console 对象

Web APIs

JavaScript Web API
JavaScript History API
JavaScript 存储 API
JavaScript Forms API
JavaScript Worker API
JavaScript Fetch API
JavaScript 定位 API

事件

JavaScript 事件
JavaScript DOM 事件
JavaScript addEventListener()
JavaScript 鼠标事件
JavaScript 键盘事件
JavaScript 表单事件
JavaScript 窗口事件
JavaScript 事件委托
JavaScript 事件冒泡
JavaScript 事件捕获
JavaScript 自定义事件

错误处理

JavaScript 错误处理
JavaScript try-catch
JavaScript 调试
JavaScript 自定义错误
JavaScript 扩展错误

重要关键字

JavaScript this'关键字
JavaScript void 关键字
JavaScript new 关键字
JavaScript var 关键字

HTML DOM

JavaScript HTML DOM
JavaScript DOM 方法
JavaScript 文档对象
JavaScript DOM 元素
JavaScript 文档表单
JavaScript 更改 HTML
JavaScript 更改 CSS
JavaScript DOM 动画
JavaScript DOM 导航
JavaScript DOM 集合
JavaScript 节点列表

杂项

JavaScript Ajax
JavaScript 异步迭代
JavaScript Atomics 对象
JavaScript 剩余参数
JavaScript 页面重定向
JavaScript 对话框
JavaScript 打印网页
JavaScript 表单验证
JavaScript 创建动画
JavaScript 多媒体
JavaScript 图像地图
JavaScript 浏览器兼容性
JavaScript JSON
JavaScript 多行字符串
JavaScript 浅拷贝
JavaScript 日期格式
JavaScript 获取日期方法
JavaScript 调用栈
JavaScript 引用类型
JavaScript 设置日期方法
JavaScript 模块
JavaScript IndexedDB
JavaScript clickjacking(点击劫持)
JavaScript 动态导入
JavaScript BigInt
JavaScript 柯里化(Currying)
JavaScript 图形库
JavaScript Blob
JavaScript Unicode
JavaScript 绘制图形
JavaScript 防抖
JavaScript 性能
JavaScript 编码规范

JavaScript 原型(Prototype)


上一章 下一章

JavaScript 中的原生原型是 Object.prototype 对象的一部分。原型是对象之间继承特性的机制。

在 JavaScript 中,每个对象都包含一个原型属性。每个对象的原型包含与该对象相关的属性和方法。因此,这也被称为原生原型。

然而,你可以更新或向原生原型对象添加新的方法和属性,但是你不能删除已存在的任何方法或属性。

理解 JavaScript 原生原型的主要先决条件是了解 JavaScript 对象及其构造函数。

语法

你可以使用以下语法来访问对象的原生原型:

Object.prototype;

在上面的语法中,object 可以是任何 JavaScript 对象。

示例:访问数组的原型

当你在浏览器中执行以下代码时,它将在浏览器控制台中打印出数组的原型。同样的方式,你也可以检查其他对象的原型。

在控制台中,你可以看到原型对象包含了你可以与数组一起使用的那些方法。

<html>
<body>
 <script>
  console.log(Array.prototype);
 
</script>
 <p>请在执行以上程序之前打开网页控制台。</p>
</body>
</html>

输出: 运行以上程序后,你会在网页控制台看到类似下面截图的结果:

JavaScript 数组原型

更新原生原型

你可以更新原生原型对象上现有的方法或属性,或者向原生原型对象添加一个新的方法或属性。

语法

你可以使用以下语法来更新或向原型对象添加新的属性或方法:

objName.prototype.name = value

在上面的语法中,objName 是你需要更新其原型的对象。

name 是方法或属性的名称。你可以给 name 赋予新的值或函数表达式。

示例:更新字符串对象原型上的 toLowerCase() 方法

字符串对象的原型包含了 toLowerCase() 方法。这里,我们将更新 toLowerCase() 方法。

更新后的 toLowerCase() 方法将以大写形式返回字符串。在输出中,你可以观察到字符串是以大写形式显示的。

通过这种方式,你可以更新对象内置方法的功能。

<html>
<body>
 <p id="output">更新字符串 toLowerCase() 方法后: </p>
 <script>
  String.prototype.toLowerCase = function () {
   return this.toUpperCase();
  }
  let str = "Hello World";
  document.getElementById("output").innerHTML += str.toLowerCase();
 
</script>
</body>
</html>

输出: 更新字符串 toLowerCase() 方法后: HELLO WORLD

你不应该更新原生原型对象上的方法和属性。然而,你可以如下面示例所示添加新的方法。

示例:向原型对象添加新方法

你也可以向 Object 原型添加一个新方法。这里,我们在对象原型中添加了 firstCase() 方法。

firstCase() 方法会在转换字符串的第一个字符为大写后返回该字符串。

<html>
<body>
   <p id="output">执行字符串 firstCase() 方法后: </p>
   <script>
  String.prototype.firstCase = function () {
   // 第一个字符为大写,其余字符为小写。
   return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase();
  }
  let str = "hello world";
  document.getElementById("output").innerHTML += str.firstCase();
 
</script>
</body>
</html>

输出: 执行字符串 firstCase() 方法后: Hello world

向构造函数添加方法

无论何时使用构造函数定义一个对象,你都不能使用其实例向构造函数添加方法或属性。因此,你需要将方法添加到构造函数的原型上,这样所有对象的实例都可以访问它。

示例

在下面的示例中,Person() 是一个初始化对象属性的构造函数。

之后,我们在 person() 函数的原型上添加了 display() 方法。

然后,我们创建了 Person() 函数的两个实例,并使用了 display() 方法。因此,添加到对象构造函数原型上的方法和属性可以通过所有构造函数实例访问。

<html>
<body>
   <p id="demo"> </p>
 <script>
  const output = document.getElementById("demo");

  function Person(id, name) {
   this.id = id;
   this.name = name;
  }
  Person.prototype.display = function () {
   output.innerHTML += this.id + ", " + this.name + "<br>";
  }
  const p1 = new Person(1, "James");
  const p2 = new Person(2, "Nayan");
  p1.display();
  p2.display();
 
</script>
</body>
</html>

输出: 1, James 2, Nayan

所有对象的实例都会从其父原型继承属性和方法。

JavaScript 原型链

简单地说,原型存储了属性的默认值。如果对象构造函数及其原型包含相同的属性,则代码会覆盖原型属性的值。

示例

在下面的代码中,Person() 函数包含 name 属性。我们在函数的原型上添加了 name 和 age 属性。

我们使用 Person() 构造函数创建了 p1 对象。p1 对象的 name 属性值为 'Adam',因为 name 已经存在于构造函数中。age 属性的值为 20,这与原型中的 age 属性值相同。

<html>
<body>
   <p id="output"> </p>
 <script>
  function Person(id, name) {
   this.id = id;
   this.name = name;
  }

  Person.prototype.name = "John";
  Person.prototype.age = 20;

  const p1 = new Person(1, "Adam");
  document.getElementById("output").innerHTML = 
      "Id: " + p1.id + ", Name: " + p1.name + ", Age: " + p1.age;
  
</script>
</body>
</html>

输出: Id: 1, Name: Adam, Age: 20

上一章 下一章
阅读号二维码

关注阅读号

联系二维码

联系我们

© 2024 Yoagoa. All rights reserved.

粤ICP备18007391号

站点地图