JavaScript显式原型与隐式原型

2023-05-17 11:49:02 浏览数 (1)

显式原型(Prototype)

在JavaScript中,每个函数都有一个特殊的属性称为"prototype"。这个"prototype"属性是一个对象,它定义了该函数创建的对象的共享属性和方法。

当我们创建一个函数时,JavaScript会自动为该函数创建一个空对象,并将这个空对象的原型属性指向函数的"prototype"属性。我们可以通过将属性和方法添加到函数的"prototype"属性上来定义共享的属性和方法。

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

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

var person = new Person('John');
person.greet(); // 输出: Hello, my name is John.

在上面的示例中,我们定义了一个名为"Person"的函数,并在其原型上定义了一个"greet"方法。当我们创建一个"Person"的实例"person"时,它继承了"Person.prototype"上定义的"greet"方法。

隐式原型([[Prototype]])

除了显式原型,JavaScript对象还具有一个内部属性"[[Prototype]]",也称为隐式原型。这个属性指向对象的原型,它是实现原型继承的关键。

当我们访问一个对象的属性或方法时,如果对象本身没有该属性或方法,JavaScript会自动查找对象的隐式原型,并在隐式原型中查找。这个过程将一直持续到找到属性或方法,或者到达原型链的末尾。

代码语言:javascript复制
var person = {
  name: 'John'
};

console.log(person.toString()); // 输出: [object Object]

在上面的示例中,我们创建了一个"person"对象,它具有"name"属性。然后,我们调用了"person"对象的"toString"方法。尽管"person"对象本身没有"toString"方法,但由于"person"对象的隐式原型指向"Object.prototype",JavaScript在隐式原型中找到了"toString"方法,并执行了它。

显式原型与隐式原型的关系

显式原型和隐式原型之间存在着紧密的关系。当我们创建一个函数时,它的"prototype"属性指向一个新创建的对象,这个新创建的对象的隐式原型又指向函数的"prototype"属性。

换句话说,函数的"prototype"属性是构造函数的一个实例,而构造函数的实例的隐式原型指向构造函数的"prototype"属性。

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

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

var person = new Person('John');
person.greet(); // 输出: Hello, my name is John.

console.log(Person.prototype); // 输出: { greet: [Function] }
console.log(person.__proto__); // 输出: { greet: [Function] }
console.log(person.__proto__ === Person.prototype); // 输出: true

在上面的示例中,我们创建了一个名为"Person"的构造函数,并在其原型上定义了"greet"方法。然后,我们创建了一个"Person"的实例"person"。

通过打印"Person.prototype"和"person.proto",我们可以看到它们都指向同一个对象,这个对象包含了构造函数的原型属性。

最后,我们使用"==="运算符检查"person.proto"和"Person.prototype"的相等性,结果为true。这证明了"person.proto"和"Person.prototype"指向同一个对象。

0 人点赞