首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript .prototype如何工作?

JavaScript .prototype 是一个非常重要的概念,它是原型继承的基础。在 JavaScript 中,每个对象都有一个原型对象,当我们试图访问一个对象的属性时,如果对象本身没有这个属性,JavaScript 会查找对象的原型链,直到找到该属性或者到达原型链的末端。

.prototype 的工作原理如下:

  1. 每个 JavaScript 函数都有一个 .prototype 属性,这个属性是一个对象。
  2. 当我们使用 new 关键字创建一个新对象时,新对象的内部 [Prototype] 属性会指向构造函数的 .prototype 对象。
  3. 当我们尝试访问新对象的属性时,如果新对象本身没有这个属性,JavaScript 会查找新对象的原型链,直到找到该属性或者到达原型链的末端。

举个例子:

代码语言:javascript
复制
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
}

const person1 = new Person('Alice', 30);
person1.sayHello(); // 输出 "Hello, my name is Alice"

在这个例子中,我们定义了一个 Person 构造函数,并且为 Person.prototype 添加了一个 sayHello 方法。然后我们使用 new 关键字创建了一个新的 Person 对象 person1,person1 的内部 [Prototype] 属性指向了 Person.prototype 对象。当我们尝试访问 person1 的 sayHello 方法时,JavaScript 会在 person1 的原型链中找到该方法并执行它。

总结一下,.prototype 是 JavaScript 原型继承的基础,它可以让我们在不修改原型对象的情况下,为已经创建的对象添加新的方法和属性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • JavaScript函数的prototype

    函数原型(prototype)的概念在JavaScript中,每个函数都有一个特殊的属性称为"prototype"。函数原型是一个指向原型对象的指针,该原型对象包含可以由该函数的实例共享的属性和方法。...通过函数原型,您可以向JavaScript对象添加新的属性和方法,这些属性和方法可以在该对象的所有实例之间共享。当您创建一个对象的实例时,该实例会自动继承原型对象的属性和方法。...这是因为JavaScript会自动将原型对象中的属性和方法添加到每个实例中。函数原型(prototype)的继承另一个重要的概念是函数原型的继承。...在JavaScript中,每个对象都有一个内部链接到其原型对象的属性,称为"proto"。通过这个属性,对象可以访问其原型对象的属性和方法。...当我们在一个对象上访问一个属性或方法时,JavaScript首先查找该对象本身是否有该属性或方法。如果没有,它会继续查找该对象的原型对象,并在原型对象中查找。

    26940

    JavaScriptprototype用法

    prototype属性的作用 JavaScript的每个对象都继承另一个对象,后者称为“原型”(prototype)对象。只有null除外,它没有自己的原型对象。...这就是JavaScript继承机制的基本设计。 通过构造函数生成实例对象时,会自动为实例对象分配原型对象。每一个构造函数都有一个prototype属性,这个属性就是实例对象的原型对象。...由于JavaScript的所有对象都有构造函数,而所有构造函数都有prototype属性(其实是所有函数都有prototype属性),所以所有对象都有自己的原型对象。...“原型链”的作用是,读取对象的某个属性时,JavaScript引擎先寻找对象本身的属性,如果找不到,就到它的原型去找,如果还是找不到,就到原型的原型去找。...b对象本身并没有x属性,但是JavaScript引擎找到它的原型对象a,然后读取a的x属性。

    48420

    JavaScript原型模式(prototype

    每个函数都有一个属性叫做prototype,这个prototype的属性值是一个对象(属性的集合),默认的只有一个叫做constructor的属性,指向这个函数本身。...在JavaScript中一个对象:就是任何的无序的键值对的集合function var a={} 如果他不是一个主数据类型(undefined null boolean number string)其他的通通叫做对象...JavaScript中的原型(prototype)是和函数(function紧密相连的) var o={} 他不是有用function他有原型吗?...答:必须的 每一个通过new操作符生成出来的对象都持有一个属性__proto__,这个属性保存了创建他的构造函数的prototype的原型的引用。  ...__proto__=per.prototype;//让空类 的对象所持有的原型的索引(__proto__)变成function类所持有的原型的索引(prototype) 原型链 上级对等 【此时为类的索引

    57540

    JavaScriptprototype&apply&call

    JavaScript中定义类的步骤可以缩减为三步: 第一步,先定义一个构造函数,并设置初始化新对象的实例属性; 第二步,给构造函数的prototype对象定义实例的方法; 第三步,给构造函数定义类字段和类属性...这意味着我们可以通过给原型对象添加新方法来扩充JavaScript类。...在实例上不能使用prototype,否则发生编译错误。 类.prototype.方法名=function(){}; 四、类继承 JavaScript 是基于对象的,任何元素都可以看成对象。...通常来说,javascript中的对象就是一个指向prototype的指针和一个自身的属性列表。javascript创建对象时采用了写时复制的理念。...A.prototype = new B(); prototype继承是通过把子类的原型对象(prototype)设置成父类的一个实例来进行继承的。

    51021

    「转」javascript中的prototype

    但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于‘类的',而是通过构造函数(constructor)和原型链(prototype chains)实现的...属性的作用 6.instanceof运算符 1.构造函数的简单介绍 在我的一篇Javascript 中构造函数与new命令的密切关系文章中,详细了介绍了构造函数的概念和特点,new命令的原理和用法等,如果对于构造函数不熟悉的同学...我希望大家都能理解的是,对于构造函数来说,prototype是作为构造函数的属性;对于对象实例来说,prototype是对象实例的原型对象。所以prototype即是属性,又是对象。...(boy)) //true 原型链(prototype chain)的特点有: a:读取对象的某个属性时,JavaScript引擎先寻找对象本身的属性,如果找不到,就到它的原型去找,如果还是找不到,就到原型的原型去找...以上所述是小编给大家介绍的详解Javascriptprototype属性(推荐)的相关知识,希望对大家有所帮助。

    58340

    JavaScript中为何要使用prototype

    JavaScript学习和工作中,或多或少会接触一些底层的JavaScript知识。...比如下面四个基本概念: 1.prototype 2.this关键字 3.原型继承 4.JavaScript闭包 个人觉得的看得越多,技术好像也越来越复杂。...之前看完《Head First JavaScript》,这本书里面讲到了this关键字和prototype的概念。一下是个人的笔记和理解。...JavaScript不是真正的面向对象(oop),但是很多开发者尝试使用编写Java/C#的方法去编写JavaScript代码,一方面是容易理解,另一方面也是后期代码中更容易维护,更容易调试等方便。...通过引入prototype,可以用改进代码,将对象实例的三个共有方法使用prototype添加到“类”Blog中。

    33410

    JavaScript如何工作的?

    原文作者:Ganesh Jaiwal 地址:https://dev.to/ganeshjaiwal/how-does-javascript-work-45oc 您是否知道简单的 JavaScript 语句需要大量工作才能完成...所以浏览器无法直接理解 javascript。 那我们该如何要求浏览器做些什么呢? 让我们从浏览器理解的语言开始。 浏览器仅理解 0 和 1,即二进制/位格式的语句。...我们无法轻松地将整个 JavaScript 转换为位。那么,我们现在该怎么办?? JavaScript 引擎:- “嘿,不用担心,我可以为您提供 JavaScript 文件。”...那么,一次只允许一项任务时,该如何工作? 这是Web API的和回调队列。...// First // Third // Second 这只是 JavaScript 引擎工作原理的概述。 分享,收藏,点赞,在看支持作者

    2.8K31

    JavaScript OOP(三):prototype原型对象(即构造函数的prototype属性)

    但是每个对象都新建了func()方法,显得多余且浪费资源 为了解决上述问题,就要用到JavaScriptprototype对象:起到共享某些相同属性和方法的作用!...JavaScript的对象都继承自"原型"对象(与java、c++中类相似的作用);除了null,null没有自己的原型 JavaScript原型设计机制:原型上面的属性和方法,都能够被子对象共享 1...只能取到实例对象;比如如下生成的: 1 var o10={ 2 name:'chrome', 3 speed:'fast' 4 }; o10是一个实例对象,但是并不是很容易找到它的构造函数 那么如何以...总结: JavaScript的继承机制主要是基于prototype的。...参考:阮一峰JavaScript标准参考教程

    1.1K70
    领券