小白自学:js中让人头大的原型

JavaScript 中的原型函数是理解 JavaScript 对象和面向对象编程的关键概念之一。本文将带你从零开始学习原型函数的基本概念、用法和重要性。

什么是原型函数?

在 JavaScript 中,每个对象都有一个原型(prototype),原型是一个对象,它包含了对象共享的属性和方法。原型函数是指直接添加到对象原型上的函数,这样所有基于该原型创建的对象都可以访问这些函数。

javascript 复制代码
Person.prototype.say = function() {
  return 'hello';
} // 给Person的原型赋值

function Person() { 
  this.name = '肖总'
  this.age = 18
} // 构造函数Person()

let p = new Person()
let p2 = new Person()

console.log(p2.say == p.say);

从上面的代码可以知道,给Person()构造函数赋予say的值,在下面创建了两个不同的实例对象,这两个不同的实例对象,就拥有了同一个方法。

原型链

在 JavaScript 中,每个对象都有一个原型链(prototype chain),它是由一系列的原型对象组成的链条。当我们访问对象的属性或方法时,JavaScript 引擎会沿着原型链逐级向上查找,直到找到对应的属性或方法,或者直到达到原型链的顶端为止。

ini 复制代码
Car.prototype = {
  name: 'BMW',
  lang: 4900,
  height: 1400
}

function Car(owner, color) {
  this.owner = owner
  this.color = color
}

var car = new Car('你好', 'green')
var car2 = new Car('您好', 'black')

console.log(car.name);

这段代码和上面的代码有异曲同工之处,在构造函数中我们设立了两个属性,然后再给它的原型函赋予一个对象,当我们调用car.name时,你会发现car中没有name这个属性,于时js引擎就找到它构造函数Car的原型,然后就找到了原型中的name属性,输出结果就是BMW,这就是原型链向上查找的方式。有趣的是绝大部分的对象最后找到的原型都是Object.prototype.

如何创建原型函数?

要创建原型函数,我们可以通过在构造函数的原型对象上添加方法来实现。下面是一个简单的示例:

javascript 复制代码
// 定义一个构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 在构造函数的原型对象上添加一个方法
Person.prototype.sayHello = function() {
    console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.');
};

// 创建一个 Person 对象
let person1 = new Person('Alice', 30);

// 调用原型函数
person1.sayHello(); // 输出 "Hello, my name is Alice and I am 30 years old."

为什么要使用原型函数?

使用原型函数的好处有很多:

  1. 节省内存空间: 将方法添加到原型对象上可以节省内存空间,因为所有基于该原型创建的对象都共享这些方法。
  2. 方便维护: 通过原型函数,我们可以轻松地将方法添加到所有对象上,而不需要逐个对象添加,提高了代码的可维护性。
  3. 减少重复代码: 原型函数使得我们可以将相同的方法定义在一个地方,避免了重复编写相同的代码。

总结

通过本文的介绍,你应该对 JavaScript 中的原型函数有了基本的了解。原型函数是 JavaScript 中面向对象编程的重要组成部分,它使得我们可以轻松地将方法添加到对象上,并且节省了内存空间,提高了代码的可维护性和重用性。继续学习原型函数,并将其运用到实际项目中,你将成为一名更加优秀的 JavaScript 开发者。

相关推荐
蓝翔认证10级掘手11 分钟前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
前端康师傅35 分钟前
JavaScript 中你不知道的按位运算
前端·javascript
tianchang1 小时前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范
best6661 小时前
JavaScript的Math内置对象,到底是何方神圣?
javascript
掘金安东尼1 小时前
技术解析:高级 Excel 财务报表解析器的架构与实现
前端·javascript·面试
每天开心1 小时前
一文教你掌握事件机制
前端·javascript·ai编程
LeeAt1 小时前
真的!真的就一句话就能明白this指向问题
前端·javascript
Winwin2 小时前
js基础-数据类型
javascript
Winwin2 小时前
哈?Boolean能作为回调函数?
javascript
Shartin2 小时前
CPT208-Human-Centric Computing: Prototype Design Optimization原型设计优化
开发语言·javascript·原型模式