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

为什么JavaScript prototype方法对相同的属性输出不同?

JavaScript中的prototype是一个对象,它包含了共享给所有实例对象的属性和方法。当我们创建一个对象时,它会继承其构造函数的prototype对象上的属性和方法。

在JavaScript中,当我们使用prototype给对象添加属性时,这些属性会成为该对象的原型属性,也就是说它们会被该对象的所有实例所共享。这意味着,如果我们修改了原型属性的值,所有实例对象都会受到影响。

然而,如果我们给实例对象添加了与原型属性同名的属性,实例对象会优先使用自身的属性值,而不会使用原型属性的值。这就是为什么JavaScript prototype方法对相同的属性输出不同的原因。

下面是一个示例来说明这个问题:

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

Person.prototype.sayHello = function() {
  console.log("Hello, " + this.name + "!");
};

var person1 = new Person("Alice");
var person2 = new Person("Bob");

person1.sayHello(); // 输出:Hello, Alice!
person2.sayHello(); // 输出:Hello, Bob!

person1.sayHello = function() {
  console.log("Hola, " + this.name + "!");
};

person1.sayHello(); // 输出:Hola, Alice!
person2.sayHello(); // 输出:Hello, Bob!

在上面的例子中,我们定义了一个Person构造函数,并将sayHello方法添加到了它的原型上。当我们创建person1和person2实例时,它们都可以调用sayHello方法并输出正确的结果。

然而,当我们给person1对象添加了一个名为sayHello的属性并赋予了一个新的函数时,它会覆盖原型上的sayHello方法。因此,当我们调用person1.sayHello()时,它会输出新的结果,而person2对象仍然使用原型上的sayHello方法输出旧的结果。

总结起来,JavaScript中的prototype机制使得我们可以在对象的原型上定义属性和方法,这些属性和方法会被该对象的所有实例所共享。然而,如果实例对象自身定义了与原型属性同名的属性,实例对象会优先使用自身的属性值。这就是为什么JavaScript prototype方法对相同的属性输出不同的原因。

腾讯云相关产品和产品介绍链接地址:

请注意,以上链接仅供参考,具体的产品选择应根据实际需求进行评估和决策。

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

相关·内容

Javascript 类、原型链、继承理解

(例如每个人名字都不相同,而名字这个属性就是一个非静态属性) b.类所有静态【属性/方法】    静态【属性/方法】就是每一个实例所共享,属于共性。...(例如每个人都要吃饭,而吃饭这个方法就是一个非静态方法) 2.Javascript实现 a.利用函数创建类,利用new关键字生成实例对象  (话不多说,先上代码,以下没有特别说明的话,我都会先上代码...方法时,访问其实都是Human.prototype.say方法,这样我们就利用prototype实现了类静态【属性/方法】,所有的对象实现了共有的特性,那就是eat 四、继承实现 1.我继承理解...  假如有n(n>=2)个类,他们一些【属性/方法】不一样,但是也有一些【属性/方法】是相同,所以我们每次定义它们时候都要重复去定义这些相同属性/方法】,那样岂不是很烦?...Son对象都会有不同name属性值,于是就实现了子类继承了父类非静态【属性/方法】 4.组合方式实现继承(组合 原型链继承 + 构造函数继承) 顾名思义,就是结合上述两种方法,然后同时实现父类静态及非静态

66510

深入JavaScript原型链污染

所有字符串都是String类一个实例 相比其他语言(如Java、python等传统OOP语言),JavaScript机制和类完全不同。...两个对象show方法不同,理论上这俩应该是相同,毕竟都是继承自类,比如python中我们会有: class Foo: def __init__(self, name):...__func__)) # 输出:True 为什么id得到结果会不相等?foo1.myName(通过实例去访问方法时),Python 实际上会创建一个绑定方法(bound method)对象。...不信我们将foo1打印出来看看(注意不同浏览器结果不一样) Prototype 属性 JavaScript Prototype 是每个对象内部一个隐藏属性,它是另一个对象引用,被称为这个对象...原型对象和 Prototype 机制使得所有的对象实例可以共享相同属性方法,这样不仅可以节省内存,也使得在对象实例上操作可以反映到所有的实例上。

20810
  • typeof和instanceof原理

    为什么Array前三位不是100?因为二进制中“前”一般代表低位, 比如二进制00000011应十进制数是3,它前三位是011。...原型链 理解原型 我们创建每个函数都有一个 [prototype])属性,这个属性是一个指针,指向一个对象,而这个对象用途是包含可以由特定类型所有实例共享属性方法。...那么 prototype 就是调用 构造函数 而创建那个对象实例原型对象。使用原型对象好处是可以让所有对象实例共享它所包含属性方法。...Object.prototype是js原型链最顶端,它__proto__是null(有__proto__属性,但值是 null,因为这是原型链最顶端); 为什么要这么设计?...最主要就是节省内存,如果属性方法定义在原型上,那么所有的实例对象就能共享。 __proto__ 绝大多数(不是所有)浏览器也支持一种非标准方法来访问内部 [[prototype]]属性

    2.5K41

    彻底搞懂JS原型与原型链

    图片二、原型和原型链是什么上面我们说到对象就是属性(property)集合,有人可能要问不是还有方法吗?其实方法也是一种属性,因为它也是键值表现形式,具体见下图。...图片可以看到obj上确实多了一个sayHello属性,值为一个函数,但是问题来了,obj上面并没有hasOwnProperty这个方法为什么我们可以调用呢?这就引出了 原型。...现在我们已经初步理解了原型和原型链,到现在大家明白为什么数组都可以使用push、slice等方法,函数可以使用call、bind等方法了吧,因为在它们原型链上找到了对应方法。...继承存在意义就是属性共享:好处有二:一是代码重用,字面意思;二是可扩展,不同对象可能继承相同属性,也可以定义只属于自己属性。...构造函数是为了创建特定类型对象,这些通过同一构造函数创建对象有相同原型,共享某些方法。举个例子,所有的数组都可以调用push方法,因为它们有相同原型。

    1.9K20

    彻底弄懂JS原型与原型链

    图片二、原型和原型链是什么上面我们说到对象就是属性(property)集合,有人可能要问不是还有方法吗?其实方法也是一种属性,因为它也是键值表现形式,具体见下图。...图片可以看到obj上确实多了一个sayHello属性,值为一个函数,但是问题来了,obj上面并没有hasOwnProperty这个方法为什么我们可以调用呢?这就引出了 原型。...现在我们已经初步理解了原型和原型链,到现在大家明白为什么数组都可以使用push、slice等方法,函数可以使用call、bind等方法了吧,因为在它们原型链上找到了对应方法。...继承存在意义就是属性共享:好处有二:一是代码重用,字面意思;二是可扩展,不同对象可能继承相同属性,也可以定义只属于自己属性。...构造函数是为了创建特定类型对象,这些通过同一构造函数创建对象有相同原型,共享某些方法。举个例子,所有的数组都可以调用push方法,因为它们有相同原型。

    1.1K40

    前端入门13-JavaScript进阶之原型声明正文-原型

    这也是为什么函数对象、数组对象、普通对象都可以使用一些内置方法,因为创建这些对象时候,默认就会有一些继承关系,跟 Java 中所有的类都继承自 Object 机制类似。...构造函数和原型关系 构造函数本身是一个函数对象,它属性 prototype 指向是另一个对象,所以这两个概念本身就是两个不同东西。..._proto_ 表示 b 原型,原型对象 constructor 属性指向构造函数 A,name 是函数对象属性,用于输出函数名。...对象属性 在对象一节中,介绍过,对象有一个类属性,其实也就是通过 Object.prototype.toString() 方法可以获取包含原始类型和引用类型名称字符串,其进行截取可以获取类属性。...局限在于,需要自己封装个工具方法获取类属性,但这不是难点,问题在于,对于自定义构造函数,都是返回 Function,而很多对象其实是通过构造函数创建出来,所以无法区分不同构造函数所创建对象。

    63330

    OOP in Javascript

    )等价,从这一点上看函数名其实就是指向函数指针,但是两者不同是,通过new Function来创建函数,会被js解释器解释两次,一次是声明时,第二次是body部分解析。...可以进行测试,发现输出全部是["zhangsna","lisi","wangwu"];为什么会出现这样结果,我们不难分析出,我们为Student构造函数原型重新指定了新对象,那么此时这个对象(Person...和myFriends属性,这样实例在输出时就不会查找原型上属性了,解决了输出不符合预期问题。...1)、Student.prototype.constructor 指向了Person 2)、调用了两次Person方法,一次是构造函数调用,一次是普通调用 3)、借用构造函数方式,是创建新实例属性覆盖原型属性...;//只要原型上内容,而不是实例,这样就避免了实例上属性,只继承原型上属性方法) F.prototype.constructor=child;//这里是强制修改constructor属性

    47950

    typescript 和class 类

    2.为什么使用TypeScript JavaScript超集 支持所有原生JavaScript语法 强类型语言 现在很多主流语言都是强类型,而这点也一直是JavaScript所被人诟病地方。...类描述了所创建对象共同属性方法。 TypeScript 支持面向对象所有特性,比如 类、接口等。...this 关键字表示当前类实例化对象。注意构造函数参数名与字段名相同,this.engine 表示类字段。 此外我们也在类中定义了一个方法 disp()。...其中 super 关键字是父类直接引用,该关键字可以引用父类属性方法。...true 访问控制修饰符 TypeScript 中,可以使用访问控制符来保护类、变量、方法和构造方法访问。TypeScript 支持 3 种不同访问权限。

    1.3K30

    针对高级前端8个级JavaScript面试问题

    , 1, 2, 3] 3- prototype 和 proto 区别 prototype 属性是与 JavaScript构造函数相关联属性。...构造函数用于在 JavaScript 中创建对象。当您定义一个构造函数时,还可以将属性方法附加到其 prototype 属性上。这些属性方法然后变得可以被该构造函数创建所有对象实例访问。...因此,prototype 属性充当共享方法属性通用存储库。...每个这样对象都有一个原型,该原型作为另一个对象引用。__proto__ 属性简单地是这个原型对象引用。 当你试图访问对象上一个属性方法时,JavaScript 会进行查找过程来找到它。...然而,由于JavaScript对对象键处理方式,结果完全不同JavaScript 使用默认toString()方法将对象键转换为字符串。为什么呢?

    21430

    针对高级前端8个级JavaScript面试问题

    , 1, 2, 3] 3- prototype 和 proto 区别 prototype 属性是与 JavaScript构造函数相关联属性。...构造函数用于在 JavaScript 中创建对象。当您定义一个构造函数时,还可以将属性方法附加到其 prototype 属性上。这些属性方法然后变得可以被该构造函数创建所有对象实例访问。...因此,prototype 属性充当共享方法属性通用存储库。...每个这样对象都有一个原型,该原型作为另一个对象引用。__proto__ 属性简单地是这个原型对象引用。 当你试图访问对象上一个属性方法时,JavaScript 会进行查找过程来找到它。...然而,由于JavaScript对对象键处理方式,结果完全不同JavaScript 使用默认toString()方法将对象键转换为字符串。为什么呢?

    18410

    this_原型链_继承

    81,但是注意看使用 bind() 方法,他后面多了括号。...3: 下面代码输出什么,为什么 func() //弹出window对象,因为在全局作用域下调用,this指向全局对象 function func() { alert(this) } 4:下面代码输出什么...); }, 200); }, false); 上面代码输出document元素对象和window对象 5:下面代码输出什么,为什么 var john = { firstName: "John...子类中与父类完全相同属性方法不必重写,因为通过继承,子类会拥有父类属性方法,不需要重新去写这些重复代码,提高了代码重用性。...而只需写出新增或改写内容,直接给子类添加新属性方法,子类就会拥有这些属性方法,表现出多态化,而父类不会被“污染”,提高了代码独立性。这就是说子类可以复用父类内容,不必一切从零开始。

    57920

    如果使用 JavaScript 原型实现继承

    例如,类C继承自类B,而类B继承自类A 值得注意是,类本身并没有做任何事情。在从类创建对象之前,实际上没有完成任何工作。我们将看到它为什么不同JavaScript。...在 JS 中,所有对象都有一个特殊内部属性,该属性基本上是另一个对象引用。 此引用取决于对象创建方式。...许多开发人员将其与.prototype属性混淆,这是完全不同事情,接着我们来研究一下.prototype属性。 在 JS 中,有许多创建对象方法。...当我们尝试其进行读取操作时,会在控制台中看到该值。 但是,当我们尝试在对象本身上设置相同属性时;JS 使用给定值在对象上创建一个新属性。...这就是为什么大多数对象共享许多方法(例如toString())原因。 因为它们实际上是在Object.prototype上定义

    69020

    JavaScript学习总结(四)——this、原型链、javascript面向对象

    相同吗?输出两个什么对象?...instanceof 运算符与 typeof 运算符相似,用于识别正在处理对象类型。与 typeof 方法不同是,instanceof 方法要求开发者明确地确认对象为某特定类型。...在这里prototype”和“proto”进行简单介绍: 对于所有的对象,都有__proto__属性,这个属性对应该对象原型。...类型增加一个repeat方法,实现重复字符,如"a".rpt(),则将输出aa,"a".rpt(5),输出“aaaaa”,因为String是JavaScript中内置对象,可以通过修改该对象原型达到目的...__proto__ = null表示原型链最顶端,如此变形成了javascript原型链继承,同时也解释了为什么所有的javascript对象都具有Object基本方法

    1.4K70

    知识点梳理

    与这个过程不同是,当javascript解析引擎执行“给一个Object某个属性赋值”时候,如果当前Object存在该属性,则改写该属性值,如果当前Object本身并不存在该属性,则赋值该属性值...而Object.prototype对象原型就是没有任何属性方法null对象,而null对象没有自己原型。...所寻找属性在越上层原型对象,性能影响越大。如果寻找某个不存在属性,将会遍历整个原型链。 5.解释一下JavaScript同源策略 1.什么是同源? 所谓“同源”指的是”三个相同“。...2.不同数据类型作为参数时,函数内部参数修改是否改变外部变量值 情况一:基本数据类型作为参数时,函数内部参数值修改不会改变外部变量值 function a(s){//定义以s为参数函数,返回...严格来讲,这就相当于说对象是一组没有特定顺序值。对象每个属性方法都有一个名字,而每个名字都映射到一个值。正因为这样,我们可以把对象想象成散列表:无非就是一组名值,其中值可以是数据或函数。

    71120

    【如果你要学JS】——巧学JScript原型链prototype

    输出"John"console.log(person.name); // 访问persongreet方法输出"Hi, my name is John and I'm 30 years old."...根据不同创建方式,JavaScript对象原型链也会有所不同。1. 字面量方式创建对象使用字面量方式创建对象原型是Object.prototype,即所有字面量创建对象都是Object实例。...然后我们定义了一个Bird构造函数,并通过Object.create方法继承了Animal构造函数原型对象,从而实现了move方法继承。最后我们添加了一个fly方法并创建了一个bird对象。...6.JavaScript原型链扩展内容深入了解原型链实现细节,包括[[Prototype]]属性、__proto__属性和Object.getPrototypeOf()方法使用。...介绍原型链在函数和构造函数中应用,以及原型链在函数原型扩展和方法继承中运用。讨论原型链与作用域链之间关系,解释为什么可以在原型对象中访问全局变量。

    17510

    期待已久 JS 原生 groupBy() 分组函数即将到来

    虽然还有一些需要注意事情。 Object.groupBy 返回是一个空原型对象,这意味着这个对象不会继承任何来自 Object.prototype 属性。...这个特性有一些好处,其中之一是您不会意外覆盖掉 Object.prototype任何属性,从而避免可能导致问题情况。...这意味着您需要确保键对象是同一个,而不是一个相似但不同对象。这是因为在 JavaScript 中,对象引用是唯一,只有引用相同才能够准确地从 Map 中检索数据。 什么时候可以用呢?...总之,这些方法代表了 JavaScript 未来发展方向,它们有望成为标准一部分,并且已经开始在现代浏览器和 JavaScript 运行时中得到支持。 为什么使用静态方法?...你可能会好奇为什么我们选择实施了 Object.groupBy 而不是像 Array.prototype.groupBy 这样数组原型方法

    87920

    JavaScript 原型与原型链:深入理解 JavaScript 核心机制

    __proto__ === Person.prototype); // 输出 true当你给一个对象添加一个属性方法时,它会先查找这个对象本身是否有这个属性方法。如果有,它就会直接覆盖。...我们让 Dog 子类继承 Animal 父类属性方法。我们通过 Object.create 方法创建了一个新对象,它原型对象指向 Animal.prototype。...虽然它可以让你直接访问对象原型对象,但它不是标准 JavaScript API,不同浏览器实现可能会有不同行为。...虽然它能够正常工作,但它不是标准 JavaScript API,不同浏览器实现可能会有不同行为。...这是标准 JavaScript API,不同浏览器实现都会返回相同结果。结论JavaScript 原型和原型链是 JavaScript 核心机制之一。

    61641
    领券