Function.prototype和Object.prototype 的区别

Function.prototypeObject.prototype 都是 JavaScript 中的重要原型对象,它们分别用于所有函数对象和所有普通对象的原型链。它们有很多不同之处,主要体现在它们所代表的对象类型和功能上。

1. 作用域和对象类型

  • Object.prototype 是所有普通 JavaScript 对象的原型。

    • 任何通过 object 构造器(如 new Object())或字面量(如 {})创建的对象都继承自 Object.prototype
    • Object.prototype 上定义了许多通用的属性和方法,比如 toString()hasOwnProperty()valueOf() 等。
  • Function.prototype 是所有函数对象的原型。

    • 任何通过 function 关键字声明的函数,或通过 new Function() 构造的函数,都会继承自 Function.prototype
    • Function.prototype 上定义了与函数相关的方法,如 call()apply()bind() 等。

2. 原型链的区别

  • Object.prototype 是最顶层的原型

    • 所有普通对象(包括数组、日期对象等)最终都继承自 Object.prototype,并且它位于原型链的最顶端。
    • Object.prototype 本身没有继承其他对象,它是原型链的"根"。
  • Function.prototype 继承自 Object.prototype

    • 所有函数对象都继承自 Function.prototype,因此,Function.prototype 上的方法可以被所有函数使用。
    • 同时,Function.prototype 也继承了 Object.prototype,这意味着函数也可以访问 Object.prototype 上的方法。

3. 核心属性和方法的区别

  • Object.prototype 的常见属性和方法

    • toString(): 返回对象的字符串表示。
    • hasOwnProperty(): 检查对象是否拥有某个自有属性。
    • valueOf(): 返回对象的原始值。
    • constructor: 指向创建该对象的构造函数。
  • Function.prototype 的常见属性和方法

    • call(): 用于调用函数,并指定 this 上下文和传入的参数。
    • apply(): 与 call() 类似,不过 apply() 接受参数是一个数组。
    • bind(): 创建一个新的函数,绑定指定的 this 值和初始参数。
    • constructor: 指向 Function 构造函数。

4. 构造器和实例的关系

  • Object.prototype 是普通对象的构造器原型。所有对象的 __proto__ 链接最终都会指向 Object.prototype。因此,你可以通过对象访问到 Object.prototype 上的方法。

    • 例如:

      javascript 复制代码
      const obj = {};
      console.log(obj.__proto__ === Object.prototype); // true
  • Function.prototype 是函数对象的构造器原型。所有函数对象的 __proto__ 链接最终指向 Function.prototype

    • 例如:

      javascript 复制代码
      function foo() {}
      console.log(foo.__proto__ === Function.prototype); // true

5. 总结

特性 Object.prototype Function.prototype
作用 所有对象的原型 所有函数对象的原型
继承关系 是原型链的最顶层,没有继承其他对象 继承自 Object.prototype
主要方法 toString(), hasOwnProperty(), valueOf() call(), apply(), bind(), constructor
构造器 所有普通对象(如 {})的构造器原型 所有函数(如通过 function 关键字声明的)构造器原型

例子

javascript 复制代码
// 1. `Object.prototype`
const obj = {};
console.log(obj.hasOwnProperty('toString')); // true
console.log(obj.toString()); // '[object Object]'
console.log(obj.constructor === Object); // true

// 2. `Function.prototype`
function myFunction() {}
console.log(myFunction.call); // function call()
console.log(myFunction instanceof Function); // true
console.log(myFunction.constructor === Function); // true

总结

  • Object.prototype 是所有对象的原型,提供了与对象相关的通用方法。
  • Function.prototype 是所有函数的原型,提供了与函数执行相关的专用方法,同时继承自 Object.prototype,因此函数也能访问对象的一些通用方法。

这两者各自有不同的角色和功能,分别用于对象和函数类型的原型链。

相关推荐
程序员清洒3 小时前
Flutter for OpenHarmony:Text — 文本显示与样式控制
开发语言·javascript·flutter
雨季6664 小时前
Flutter 三端应用实战:OpenHarmony 简易“动态内边距调节器”交互模式深度解析
javascript·flutter·ui·交互·dart
会飞的战斗鸡4 小时前
JS中的链表(含leetcode例题)
javascript·leetcode·链表
方也_arkling5 小时前
别名路径联想提示。@/统一文件路径的配置
前端·javascript
qq_177767375 小时前
React Native鸿蒙跨平台剧集管理应用实现,包含主应用组件、剧集列表、分类筛选、搜索排序等功能模块
javascript·react native·react.js·交互·harmonyos
qq_177767375 小时前
React Native鸿蒙跨平台自定义复选框组件,通过样式数组实现选中/未选中状态的样式切换,使用链式调用替代样式数组,实现状态驱动的样式变化
javascript·react native·react.js·架构·ecmascript·harmonyos·媒体
web打印社区5 小时前
web-print-pdf:突破浏览器限制,实现专业级Web静默打印
前端·javascript·vue.js·electron·html
烬头88216 小时前
React Native鸿蒙跨平台采用了函数式组件的形式,通过 props 接收分类数据,使用 TouchableOpacity实现了点击交互效果
javascript·react native·react.js·ecmascript·交互·harmonyos
Amumu121386 小时前
Vuex介绍
前端·javascript·vue.js
2601_949809596 小时前
flutter_for_openharmony家庭相册app实战+相册详情实现
javascript·flutter·ajax