小白自学: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 开发者。

相关推荐
落笔忆梦9 分钟前
利用浏览器空闲时间优化资源加载与渲染
前端·javascript
艾小码10 分钟前
还在用Vue 2硬撑?升级Vue 3的避坑指南来了!
前端·javascript·vue.js
Mintopia12 分钟前
🌐 交互式 AIGC:Web 端实时反馈生成的技术架构设计
前端·javascript·aigc
蓝天星空13 分钟前
ES6-Promise用法
前端·javascript·es6
诗书画唱16 分钟前
解决HTML/JS开发中的常见问题与实用资源
前端·javascript·html
Mintopia18 分钟前
🚀 Next.js 自建部署全家桶:Docker + PM2 + Nginx
前端·javascript·全栈
鹏多多20 分钟前
详解vue渲染函数render的使用
前端·javascript·vue.js
定栓25 分钟前
Typescript入门-JSDoc注释及tsconfig讲解
前端·javascript·typescript
小意恩33 分钟前
el-table表头做过滤
前端·javascript·vue.js
fury_12334 分钟前
vue3:触发自动el-input输入框焦点
javascript·vue.js·elementui