prototype (原型) 属性

本文深入探讨JavaScript中的原型模式,解析原型属性、构造函数及其实例之间的关系,并讨论如何正确使用原型模式来实现对象继承。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

转自:https://www.jianshu.com/p/4f87d28923ce

这篇文章是基于 <<JavaScript 高级程序设计>>第六章面向对象的程序设计 6.2.3原型模式

我们每创建一个函数, 都有一个 prototype (原型)属性, 这个属性是一个指针, 指向一个对象,这个对象的 用途: 包含可以由指定类型的所有实例共享的属性和方法
所以 prototype 就是通过调用构造函数而创建的哪个对象实例的原型对象

function Person() {};
Person.prototype.name = 'TonNi';
Person.prototype.age = 19;
Person.prototype.sayName = function () {
    alert ( this. name );
}

var person1 = new Person();
person1.sayName() // TonNi;

// prototype.isPrototypeOf 判断 person1 实例的原型是不是 Person
console.log (Person.prototype.isPrototypeOf(person1))  // true

//  Object.getPrototypeOf 该方法获取一个对象的原型
console.log(Object.getPrototypeOf(person1) === Person.prototype) // true 
console.log(Object.getPrototypeOf(person1).name) //TonNi

// hasOwnProperty 检测一个实例属性是不是存在与实例中 , 存在返回true
person1.sing = 'i can sing';
console.log(person1.hasOwnProperty('name')) // false 
console.log(person1.hasOwnProperty('sing')) // true 

1: 什么是实例, 什么是原型 ?

以上面的代码为例,
原型: 就是 大写的 Person 函数
实例: 就是以 Person为原型 从新 new 出来的person; 上例中的 person1就是实例

这里我们将 name, age, sayName() 等属性和方法 直接添加到了 Personprototype 中, 这样所有 new 出来的实例 都拥有同样的 属性和方法, 可以被访问或调用. var person2 = new Person() person2 和 person1 一样拥有同样的属性和方法

2: constructor

只要创建一个新的函数, 就会根据特定规则为该函数创建一个 prototype 属性, 此属性指向函数的原型对象
而在默认情况下, 所有的原型对象都会自动获得一个 constructor (构造函数) 属性, 这个属性是一个指向 prototype 属性所在函数的指针.
可以看下图, Person.prototype.constructor 指向的就是 Person

结构

作用:
通过这个构造函数, 我们还可以继续为原型对象添加其他属性和方法

3: 如果实例中和原型都有同名的属性或者方法, 调用哪个呢?

当代码读取某个属性或者方法时, 都会经行一次搜索, 搜索目标是给定的属性或方法的名字. 搜索顺序是, 先从实例查找 , 如果实例中有, 则返回属性值或者调用方法, 如果没有, 则搜索指针指向原型对象, 如果有同上, 如果没有, 属性就返回 undefind, 方法则报错, xxx is not a function

function Person() {};
Person.prototype.name = 'TonNi';
Person.prototype.age = 19;
Person.prototype.sayName = function () {
    alert ( this. name );
}

var person1 = new Person();
console.log(person1.name) //  'TonNi'   实例中没有则去原型中找, 找到后返回属性值,

person1.name = 'Mike'
console.log(person1.name) // Mike 实例中有了name 就直接拿来用了

//在实例化一个person2
var person2 = new Person()
console.log(person2 .name) //  'TonNi'   实例中没有则去原型中找, 找到后返回属性值, 不会因为 person1添加了name收到影响

// 删除person1中的name
delete person1.name;
console.log(person1.name) //  'TonNi'  删除后 实例中没有则去原型中找, 找到后返回属性值,

故当我们为实例添加一个属性时,此属性会屏蔽掉原型中对象中的同名属性, 但是只会阻止我们访问对象原型属性, 并不会修改

4: 关于判断属性或方法是存在实例还是原型中

  • hasOwnProperty() 只有属性或方法 在实例中才为 true
...上面的例子
person1.hasOwnproperty('name');  //  false  不在实例中

person1.name = 'Mike';
person1.hasOwnProperty('name'); // true 在实例中, 返回true
  • in操作符
    无论该属性在实例中还是原型中, 只要能访问到就返回 true
...上上面的例子
'name' in person1 // true;
person1.hasOwnproperty('name');  //  false  不在实例中

person1.name = 'Mike';
'name' in person1 // true;
person1.hasOwnProperty('name'); // true 在实例中, 返回true

'run' in person1; // false 实例和原型都没有 

所以呢, 同时使用 hasOwnProperty()in 就可以确定该属性到底存在对象还是原型中了

function hasPrototypeProperty (object, name) {
  return !object.hasOwnProperty(name) && (name in object);
}

由于 in 操作符只要通过对象能够访问到属性就能返回 true, hasOwnProperty() 只要属性存在实例中才能返回 true, 所以只要 in 返回 truehasOwnProperty() 返回 false 就说明属性在原型中

5: 更简单的原型语法

由于上面例子每添加一个属性就敲一次 Person.prototype 很麻烦, 为了减少不必要的输入, 如下:

function Person () {}
Person.prototype = {
    name: 'Toni',
    age: 19,
    sayName: function () {
        console.log(this.name);
    }
}

缺点1:
按照上面的对象字面量来重写整个原型对象, 最终结果相同, 但是, constructor 属性不在指向 Person, 这里重写了后, constructor 指向了新对象 Object构造函数 不在指向 Person, 尽管 instanceof 还能返回正确的结果, 但是 constructor 已经无法确定对象类型了
如:

//上例
var friend = new Person();
console.log(friend  instanceof Object)// true
console.log(friend  instanceof Person)// true

console.log(friend.constructor == Person) // false  正常的此处应为true
console.log(friend.constructor == Object) // true

改进:
如果你的确需要 constructor属性的话, 可以这样:

function Person () {}
Person.prototype = {
    constructor: Person,     //这里 
    name: 'Toni',
    age: 19,
    sayName: function () {
        console.log(this.name);
    }
}

或者 使用 Object.defineProperty()

function Person () {}
Person.prototype = {
    name: 'Toni',
    age: 19,
    sayName: function () {
        console.log(this.name);
    }
}

Object.defineProPerty (Person.prototype, 'constructor', {
    enumerable: false,
    value: Person
})
  • 第一种方法: 有个问题就是, 把原本 constructor 属性的 Enumerable 设置成了 true 成了可枚举的属性, 原生的是 false 不可枚举
  • 第二中方法, 则是重构构造函数, 直接设置了 enumerable: false, 但是 只适应于 ECMAScript 5 兼容的浏览器

缺点2或者是需注意:
看例子:
例子1

var friend = new Person();    // 先实例化一个Person原型
Person.prototype.sayHi = function () { 
    console.log('Hi')
};                                        // 添加方法

friend.sayHi();  // Hi     没什么问题

例子2:

function Person () {};    //原型

var friend = new Person(); //  紧接着实例化  (注意这里实例的顺序)

Person.prototype = {
    constructor: Person,    
    name: 'Toni',
    age: 19,
    sayName: function () {
        console.log(this.name);
    }
}                                             // 然后在添加属性方法

friend.sayName()              // 报错 friend.sayName is not a function

例子2正确的顺序是:

function Person () {};    //原型

Person.prototype = {
    constructor: Person,   
    name: 'Toni',
    age: 19,
    sayName: function () {
        console.log(this.name);
    }
}                                             // 然后在添加属性方法

var friend = new Person();    //  实例化

friend.sayName()              //  'Toni';

例子错误原因

例子1中, 因为实例与原型中链接的是一个指针, 而非一个副本, 所以不论实例化原型与添加属性方法的顺序如何, 都是可以在原型中获取到

例子2中, 我们先创建一个Person 的一个实例, 然后又重写了其原型对象,
但是, 重写原型对象就切断了现有原型与任何之前已经存在的对象实例之间的联系

6: 原型对象的问题

原型对象的缺点 , 所有的实例都在默认情况下获取相同的属性值, 即共享本性, 虽然这也是其优点, 但是这中共享对于函数非常适合, 对于包含基本值(即 name: 'tom',)的属性还算可以, 但是对于引用类型(Object, Array,String, ...)的属性问题就比较突出了
如:

function Person () {};    

Person.prototype = {
    constructor: Person,   
    name: 'Toni',
    age: 19,
    friends: ['Tom', 'mike', 'Anny'],
    sayName: function () {
        console.log(this.name);
    }
}                                             

var friend1 = new Person();   
var friend2 = new Person();   

console.log (friend2 .friends) //'Tom', 'mike', 'Anny'   正常显示

friend1 .friends.push('Masa');   // 使用实例1 在数组中添加一个人名 

console.log (friend2 .friends) //'Tom', 'mike', 'Anny' ,'Masa'  , person2受到了影响

当然了如果你要的结果就是这样, 那倒无所谓, 如果不是, 都需要单独的属性的话, 就有很大问题,

问题原因自然是由于实例与原型中链接的是一个指针, 指向同一个数组, friend1 对原型的修改, friend2 也会反映出来

7: 所以最好组合是

组合使用 构造函数模式 和原型模式,
构造函数模式用于定义实例属性,
原型模式用于定义方法和共享属性,

// 构造函数, 定义实例属性,  this将作用域指向新对象
function Person (name,age) {
    this.name = name;
    this.age = age;
    this.friends = ['Tom', 'Mike'];
}

//原型模式用于定义方法和共享属性,
Person.prototype = {
    constructor: Person,
    sayName: function () {
        console.log(this.name)
    }
}

var person1 = new Person ('Toni', 19) ;
var person2 = new Person ('Anny', 18);

person1.friends.push('An');
console.log(person1.friends);  // 'Tom', 'Mike','An'
console.log(person2.friends) ; //  'Tom', 'Mike', 

例子中, 实例属性都是在构造函数中定义的, 而由所有实例共享的属性 construction 和 方法 sayName 都是在原型中定义的, 因而, 修改 person1.friends 数组, 只是修改实例中的数组, 没有修改共有属性,, 所以其他实例不会受到影响



作者:有情怀的程序猿
链接:https://www.jianshu.com/p/4f87d28923ce
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

<think>嗯,用户想了解JavaScript中的prototype原型概念,以及它在面向对象编程中的用法。之前我参考了站内三篇关于原型对象的引用资料,它们都强调了原型链机制和共享属性的特点。用户可能是个前端开发者,正在学习JS核心概念。从ta提问的方式看,ta已经知道prototype和面向对象有关联,但需要系统性的梳理。特别要注意用户上次其实是在确认引用资料的有效性,这次才是真正的概念咨询。需要重点讲清楚这几个维度:原型对象的存在意义(解决什么问题)、函数prototype属性和实例__proto__的区别、原型链的查找机制、构造函数模式的应用示例。引用资料里提到Object.getPrototypeOf()这些方法很适合作为补充说明。考虑到用户是概念学习,第一优先级是把原型的存在价值讲透——为什么JS需要原型而不是用类继承。那个Foo构造函数的例子很经典,准备展示prototype如何实现所有实例共享sayHi方法。还要注意区分用户可能的混淆点:prototype属性本身是个普通对象,它被所有实例通过__proto__指向。最后面向实践的部分,用户可能需要知道如何应用原型做继承。会简要带过组合继承的例子,但避免引入太多新概念以免偏离主线。结尾的验证题可以检测用户对引用类型的理解深度。</think> 好的,让我们深入理解 JavaScript 中的 `prototype`(原型)概念及其在面向对象编程(OOP)中的应用。这是 JavaScript 核心且独特的特性。 **核心概念:`prototype` 是什么?** 1. **`prototype` 是一个对象:** 在 JavaScript 中,**每个函数**(除了箭头函数和一些内置函数)在创建时都会自动获得一个名为 `prototype` 的属性。这个属性指向一个**对象**(我们称之为原型对象)。 * 这个 `prototype` 对象本身也是一个普通的 JavaScript 对象。 * 它的**核心目的**是**让由该函数(作为构造函数)创建的所有对象实例共享方法和属性**。 * *示例:* ```javascript function Foo() {} // 声明一个函数(也可以作为构造函数使用) // 函数 Foo 自动获得一个 prototype 属性,指向一个对象 console.log(typeof Foo.prototype); // 'object' (函数调用) console.log(Foo.prototype); // 输出: {} (一个空对象) ``` [^1][^2] 2. **实例与 `[[Prototype]]` (或 `__proto__`):** 当你使用 `new` 关键字调用一个函数(此时它是一个构造函数)创建一个实例时,会发生一件关键的事情: * JavaScript 会在内部为新创建的实例对象(我们称之为 `instance`)设置一个**内部链接**,通常标记为 `[[Prototype]]`(在 ES6 规范中)。许多浏览器环境提供了非标准的 `__proto__` 属性来访问这个内部链接。 * **这个 `[[Prototype]]` 链接指向该实例的构造函数的 `prototype` 对象。** * *示例:* ```javascript const myFoo = new Foo(); // 用 new 调用 Foo,创建实例 myFoo // myFoo 的内部 [[Prototype]] 指向了 Foo.prototype console.log(Object.getPrototypeOf(myFoo) === Foo.prototype); // true (标准方式) console.log(myFoo.__proto__ === Foo.prototype); // true (非标准,但普遍支持) ``` [^3][^1] 3. **原型链(Prototype Chain)与属性查找:** 这是原型机制的**核心**。当你尝试访问一个对象的属性(比如 `obj.property`)或方法(比如 `obj.method()`)时: 1. JavaScript 引擎首先在**对象实例本身**上查找该属性(在其自有属性中查找)。 2. 如果在实例本身没找到,引擎就会沿着该实例的 `[[Prototype]]` 链接**向上查找**(去它的构造函数的 `prototype` 对象上找)。 3. 如果在该 `prototype` 对象上还没找到,引擎会继续沿着 *那个对象* 的 `[[Prototype]]` 链接向上查找(通常是 `Object.prototype`),直到到达原型链的末端(`null`)。 4. 如果直到 `null` 还没找到,则返回 `undefined`。 * *示例:* ```javascript function Foo() { this.instanceProp = "I'm on the instance"; // 实例自身的属性 } // 在 Foo 的 prototype 对象上添加一个共享的方法 Foo.prototype.sharedMethod = function() { return "I'm shared by all instances via the prototype"; }; const foo1 = new Foo(); const foo2 = new Foo(); // 访问实例自有属性 console.log(foo1.instanceProp); // "I'm on the instance" (来自实例自身) // 访问共享方法 - 在实例自身找不到 => 沿着 [[Prototype]] 到 Foo.prototype 上找到 console.log(foo1.sharedMethod()); // "I'm shared..." (来自原型) console.log(foo2.sharedMethod()); // "I'm shared..." (也来自原型) // 证明 foo1 自身没有 sharedMethod 属性 console.log(foo1.hasOwnProperty('sharedMethod')); // false ``` [^2][^1][^3] **`prototype` 在 JavaScript 面向对象编程(OOP)中的用法** JavaScript 利用原型链来实现类似传统基于类的语言中的“继承”和“共享行为”的概念。 1. **属性/方法共享:** 如上例所示,这是最基础也最重要的用法。将通用的属性和方法定义在构造函数的 `prototype` 对象上,可以让所有实例通过原型链访问它们,**避免了在每个实例中重复创建副本,节省内存,提升效率**。 2. **模拟类继承:** 通过设置子类构造函数的 `prototype` 为父类的一个实例(或直接使用 `Object.create()`),可以建立原型链继承关系。 * 假设 `Child` 需要继承 `Parent`: ```javascript // 父类构造函数 function Parent(name) { this.name = name; } Parent.prototype.greet = function() { console.log(`Hello, I'm ${this.name}`); }; // 子类构造函数 function Child(name, toy) { Parent.call(this, name); // 1. 调用父构造函数,初始化自有属性(类似 super) this.toy = toy; } // **关键步骤:设置 Child.prototype原型链指向 Parent.prototype** // 方法1:使用 Object.create - 推荐(ES5+) Child.prototype = Object.create(Parent.prototype); // 方法2:使用过时的__proto__ (不推荐) // Child.prototype.__proto__ = Parent.prototype; // 修复构造函数指针(此时 Child.prototype.constructor 应该是 Child,但被设置为 Parent) Child.prototype.constructor = Child; // 在子类原型上添加子类特有方法 Child.prototype.play = function() { console.log(`Playing with ${this.toy}`); }; // 测试 const child = new Child('Billy', 'Ball'); child.greet(); // "Hello, I'm Billy" (从 Parent.prototype 继承) child.play(); // "Playing with Ball" (Child.prototype) ``` [^1][^2] `Object.create()` 是建立原型继承链的标准且可靠方法。 3. **理解内置对象的构造:** JavaScript 的所有内置对象(如 `Array`, `Object`, `Function`, `String`, `Date` 等)都使用了原型机制。例如: * 当你创建一个数组 `const arr = [1, 2, 3]` 时,相当于 `new Array(1, 2, 3)`。 * `arr` 的 `[[Prototype]]` 指向 `Array.prototype`。这就是为什么所有数组实例都能使用 `push()`, `pop()`, `map()` 等方法的原因——它们都定义在 `Array.prototype` 上。 * `Array.prototype` 自身的 `[[Prototype]]` 又指向 `Object.prototype`,这就是为什么数组实例也能使用 `toString()` 或 `hasOwnProperty()` 的原因(虽然数组通常重写了 `toString` 的行为)。 * `Object.prototype` 是大多数对象原型链的终点,它的 `[[Prototype]]` 是 `null`。它提供了 `toString()`, `valueOf()`, `hasOwnProperty()` 等最基础的方法。 [^3][^1] 4. **扩展内置对象(谨慎使用):** 理论上,你可以给内置对象的原型添加自定义方法(如 `Array.prototype.myCustomMethod = ...`)。但**这种做法通常非常不推荐**,因为它可能污染全局命名空间、引发命名冲突、影响兼容性、导致代码难以维护。在极少数需要时(如为非常老的环境提供 polyfill),应极其小心并充分兼容处理。 **总结关键点** * **`prototype` 属于构造函数**:是一个属性,指向一个对象(原型对象)。 * **`[[Prototype]]` 或 `__proto__` 属于实例对象**:是一个内部链接(可通过 `Object.getPrototypeOf()` 读取/`Object.setPrototypeOf()` 设置),指向**创建该实例的构造函数的 `prototype` 对象**。 * **原型链**:是 `[[Prototype]]` 指针形成的链条(`实例 -> 构造函数.prototype -> ... -> Object.prototype -> null`)。 * **查找规则**:查找属性/方法时,沿着原型链从实例自身向上查找。 * **核心作用**:**实现高效的方法和属性共享**,是 JavaScript 实现继承和多态的基石。 * **面向对象的意义**:使 JavaScript 能够以一种独特但功能强大的方式实现基于原型的面向对象编程模式,支持继承、代码复用和对象行为的扩展。 理解 `prototype`、`[[Prototype]]` 和原型链是深入掌握 JavaScript 的关键一步。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值