深入解析 JavaScript 中的 F.prototype

🧑?🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》?、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

??

? 前言

????????JavaScript作为一门原型继承语言,函数的prototype属性在其中发挥着重要作用。prototype并不难以理解,但许多刚接触JS的开发者仍会对其存在一定困惑。本文将详细剖析prototype的指向、作用及运用,帮助大家深入理解这个核心概念。

?

? 正文

????????在 JavaScript 中,每定义一个函数 F,解释器都会为其添加一个 prototype 属性,这个属性指向函数的原型对象。理解 prototype 在 JavaScript 中的作用很重要。

1. prototype是函数独有的属性,普通对象没有这个属性。
2. 每个函数都包含一个 prototype 属性,这个属性指向一个对象就是这个函数的原型对象。
3. 当一个函数被定义后,JS解释器会为这个函数添加 prototype 属性,这个属性指向函数的原型对象。
4. 原型对象中包含了可以由该函数创建的对象共享的属性和方法。
5. 通过给函数的 prototype 对象添加属性和方法,我们可以实现对象间的信息共享。

例如:

function Person() {

}

Person.prototype.name = 'John';

let p1 = new Person();
p1.name; // 'John'

????????这里为 Person.prototype 添加了一个 name 属性,然后 p1 对象可以访问到这个属性。

????????原型对象的作用就是定义所有实例对象共享的属性和方法。正确使用原型对象可以节省内存,实现信息共享。

????????综上所述,JavaScript 中函数的 prototype 属性指向一个原型对象,这个原型对象包含了可以由该函数创建的对象共享的属性和方法。理解原型对象的作用很重要,可以实现 JS 对象间的信息共享,是一个核心概念。

针对JavaScript中的prototype和原型链的每一点结合代码示例进行更详细的讲解:

• prototype对象

每个函数都有一个prototype属性指向原型对象:

function Person() {} 

console.log(Person.prototype) // 指向Person的原型对象

?原型对象中包含该函数创建的实例对象共享的属性和方法:

Person.prototype.name = 'John';

let p1 = new Person();
p1.name // 'John'

• __proto__属性

实例对象都有__proto__属性指向构造函数的原型对象:

let p1 = new Person();
console.log(p1.__proto__ === Person.prototype); // true

• 原型链

通过__proto__链条可以实现对原型属性的访问:

// p1没有name属性 
// 通过__proto__查找Person.prototype中name属性
p1.name // 'John'

• constructor属性

原型对象中都有constructor属性指向关联的构造函数:

console.log(Person.prototype.constructor === Person) // true

• 原型继承

子类原型重写实现继承:

function Student() {}

Student.prototype.__proto__ = Person.prototype; 

Student.prototype.sayHi = function() {
  console.log('Hi');
}

Student继承了Person的原型中的属性和sayHi方法。?

? 结语

?????????通过本文的介绍,我们可以看到函数的prototype属性直接指向了一个原型对象,这个原型对象中包含了该函数所创建的实例对象共享的属性和方法。

????????正确运用原型对象,可以实现JS对象之间的信息共享,优化内存占用。同时还需要注意,原型链过长可能会影响查找效率。

????????综上所述,prototype是JS中非常重要的一个概念。充分理解prototype的作用,掌握何时如何使用原型对象,可以帮助我们写出内存优化的代码,提高程序的性能。

? ? ??

?