深入原型:new当中的奥秘

在JavaScript中,new操作符扮演着一个至关重要的角色,它负责创建新对象并初始化该对象,这一过程深刻体现了原型链和原型的概念。本文将深入探讨new操作的具体机制,并揭示它是如何与原型和原型链紧密协作的。

js 复制代码
    function Person() {
        this.name='Tom'
    }
    Person.prototype.age=18;
    let John=new Person();
    console.log(John.age);//输出18

初次看到以上代码,肯定十分好奇prototype是什么,John中没有age属性是如何输出18的?带着这些问题我们开始以下学习。

实例的公共祖先

  • prototype(显式原型)是函数自带的一个属性,它定义了构造函数创建的实例对象的公共祖先。
  • 通过构造函数创建的对象,可以继承该函数原型上的属性。
  • 实例对象隐式具有构造函数原型上的属性,且是只读属性。

所以结合开头示例,prototype是Person的属性,它是一个对象里面存在着Person的属性和方法。Person.prototype.age相当于给Person的原型添加了age属性,而John是通过Person创建的,所以他能访问到Person.prototype里的age属性。

那John是通过什么方式访问到Person.prototype内的属性和方法的呢? 其中便涉及到了__proto__以及原型链。

__proto__(隐式原型)

是JavaScript中每一个对象(除null外)都拥有的一个非标准但广泛支持的属性,它用来访问该对象的原型(prototype)。

原型链

v8 在查找对象中的属性时,如果没找到,就会顺着对象的隐式原型往上查找,还找不到,在顺着隐式原型的隐式原型往上找,直到找到null为止,在这个过程中但凡有一个步骤能找到,就会返回值。这个链状的查找过程称为原型链。

了解了以上知识后,我们就开始探索new中的奥秘。

new操作的基本流程

当使用new关键字调用一个构造函数时,JavaScript引擎会执行以下四个步骤:

  1. 创建新对象 :首先,new操作符会创建一个新的空对象,这个对象将作为构造函数的实例。
  2. 绑定this并执行构造函数 :然后,构造函数会被调用,此时this关键字被绑定到新创建的对象上。这样,构造函数内部可以通过this来给新对象添加属性或执行其他初始化操作。
  3. 设置原型链 :接着,这个新创建的对象内部会自动获得一个属性,即__proto__,它指向构造函数的prototype对象。这意味着新对象可以从构造函数的原型上继承属性和方法,形成了原型链的基础。
  4. 返回新对象 :如果构造函数没有显式返回一个对象(或者返回的是非对象类型),则new操作会自动返回第一步创建的新对象。如果构造函数显示返回了一个新的对象,则返回该对象,而不是第一步创建的对象。

结合开头示例,new的过程如下

js 复制代码
function myNew(Fun,...args){
    let obj={};//创建新的空对象
    Fun.apply(obj,args);//改变Fun的this指向,并导入obj中的属性
    obj.__proto__=Fun.prototype;//让新对象中的隐式原型指向构造函数原型的显式原型
    return obj;//返回新对象即John
}

补充:没有原型的对象

虽然大多数JavaScript对象都通过原型链继承自Object.prototype,但也有例外,如使用Object.create(null)创建的对象就没有原型。这样的对象不具有任何默认的Object属性或方法,比如toString()或hasOwnProperty(),这在需要创建一个"纯净"对象时非常有用,避免了因原型链带来的潜在干扰。

结论

new操作符不仅简化了对象的创建和初始化过程,还通过原型和原型链机制实现了面向对象编程中的继承。理解new操作的内部机制,对于深入掌握JavaScript的面向对象特性至关重要。通过原型链,对象可以访问到其构造函数原型上的共享属性和方法,而特定情况下创建无原型链的对象,则为开发提供了更多的灵活性。

相关推荐
FungLeo1 小时前
成为全栈·Vue 管理后台篇·分类树与标签管理:层级数据如何落到管理界面
前端·javascript·vue.js·分类树·naive ui·标签管理·前端数据结构
总要学点什么1 小时前
第108篇:三维特效-图片轨迹线效果——把贴图滚成一串箭头,想用它的本色反而整条消失
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
Lank_M4 小时前
白底都占八成,PNG 为何只在图表页赢过 JPG
前端
张一凡934 小时前
给 Coding Agent 加一道"架构闸门":Jin 是如何做到"先审架构、再写代码、不漂移"的
前端·后端·agent
Linye4 小时前
AI 写的 HTML 原型全是空壳?聊聊真实 DOM 交互避坑
前端·人工智能
ZANE4 小时前
纯前端实现的 PDF 与图片互相转换工具技术实现
前端
Swot5 小时前
SvelteKit Remote Functions 使用指南
前端·后端
Cooper255 小时前
三源热榜去重加 AI 摘要:URL 唯一键踩出的三个坑
前端·python
Yk酱228405 小时前
A2UI探索随笔-技术选型
前端
前端繁华如梦5 小时前
# 从 73000 行压缩代码到 TypeScript 模块化:我把一个 Three.js FPS 游戏 1:1 复刻了一遍
前端