谈谈我对JavaScript原型和闭包系列理解(随手笔记8)

yizhihongxing

针对“谈谈我对JavaScript原型和闭包系列理解(随手笔记8)”这个话题,我将提供以下攻略:

1. 原型

什么是原型

在JavaScript中,除了基本数据类型(Number、Boolean、String、Undefined、Null)、对象类型(Object)和函数类型(Function)外,还有一种被称为原型对象(Prototype Object)的特殊类型。每个对象都有原型对象,这个原型对象相当于一个模板,直接或间接地定义了该对象的属性和方法。

原型链

如果在当前实例中找不到某个属性或方法,就会去它的原型对象中查找,如果还找不到,再去原型对象的原型对象(即原型链上的下一个对象)中查找,直到找到为止。这就是原型链的实现方式。

构造函数

构造函数是用来生成对象的,它专门定义了一种类型的对象,其内部使用了this关键字。通过new关键字来调用构造函数,可以新建一个对象(实例)。而这个对象的原型对象,就是构造函数的prototype属性所指向的那个对象。

示例

function Person(name, age) {
  this.name = name; // 实例属性
  this.age = age;
}
Person.prototype.sayHello = function() { // 原型方法
  console.log(`Hello, My name is ${this.name}.`);
}
const person1 = new Person("张三", 20);
const person2 = new Person("李四", 30);
person1.sayHello(); // 输出: Hello, My name is 张三.
person2.sayHello(); // 输出: Hello, My name is 李四.
console.log(person1.__proto__ === Person.prototype); // 输出: true
console.log(person2.__proto__ === Person.prototype); // 输出: true
console.log(Person.prototype.__proto__ === Object.prototype); // 输出: true

2. 闭包

什么是闭包

闭包指的是能够访问自由变量的函数,也就是在函数内部定义的一个函数,能够访问外层函数的变量,并将其保留在内存中,从而使得外层函数的局部变量可以在内部函数被调用后继续被访问,这样的函数就被称为闭包。

闭包的应用

闭包的主要应用场景就是封装变量,实现私有变量和私有方法的效果,从而避免全局变量污染,提高代码的可维护性和安全性。

示例

function counter() {
  let count = 0; // 定义私有变量
  function increment() { // 定义内部函数
    count++;
    console.log(count);
  }
  function decrement() { // 定义内部函数
    count--;
    console.log(count);
  }
  return {
    increment, // 返回含有内部函数的对象
    decrement
  };
}
const myCounter = counter();
myCounter.increment(); // 输出: 1
myCounter.increment(); // 输出: 2
myCounter.increment(); // 输出: 3
myCounter.decrement(); // 输出: 2

以上就是我对JavaScript原型和闭包的理解,希望对你有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:谈谈我对JavaScript原型和闭包系列理解(随手笔记8) - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 防止浏览器记住用户名及密码的简单实用方法

    请看下面的解释: 防止浏览器记住用户名及密码的简单实用方法 如果你担心你保存在浏览器中的用户名和密码被盗取或者暴露,那么最好的防范措施是不允许浏览器记住这些信息。虽然浏览器自带的自动填充功能可以为用户省去不少麻烦,但也有可能被利用导致泄露用户隐私,甚至容易导致经济损失。这里提供几种简单而实用的方法来防止浏览器记住你的用户名和密码。 方法一:添加autocom…

    JavaScript 2023年6月11日
    00
  • javascript使用中为什么10..toString()正常而10.toString()出错呢

    这是一个有趣的问题,事实上,10..toString() 和 10.toString() 演示的两种方法是不同的。 在 JavaScript 中,要调用对象的方法,我们通常使用点符号将对象与方法名称连接,例如 object.method()。然而,数字直接量(例如 10)之后的点符号(”.”) 会被 JavaScript 解释为带有小数的数字,因此解释器会尝…

    JavaScript 2023年5月18日
    00
  • 深入理解JavaScript编程中的原型概念

    深入理解JavaScript编程中的原型概念 JavaScript 中的原型是 JavaScript 编程中的核心概念,对于理解 JavaScript 中的对象和继承非常重要。 原型总览 在 JavaScript 中,每个对象都有一个原型。当你访问一个实例属性时,JavaScript 首先查找实例对象是否具有该属性,如果没有,则沿着原型链向上查找该属性。原型…

    JavaScript 2023年6月10日
    00
  • 基于JS实现快速读取TXT文件

    基于JS实现快速读取TXT文件 要实现在网页中快速读取TXT文件,可以使用JavaScript提供的File API来完成。 步骤 以下是实现该功能的步骤: 使用input元素创建一个文件选择器,让用户可以选择要读取的TXT文件。 使用JavaScript的FileReader对象读取选择的文件。 使用回调函数读取文件内容。 在网页上显示文件内容或者执行其他…

    JavaScript 2023年5月27日
    00
  • html下载本地

    要将HTML文件下载到本地,我们可以使用以下两种方法: 方法一:右键另存为(Save As) 这是最简单的方法,只需右键点击正在浏览的HTML页面,选择“另存为”或“Save As”,然后指定下载路径和文件名即可。 请注意,如果这个HTML页面包含CSS、JavaScript或图像等外部文件,则需要将这些文件一同下载到本地,并确保它们在同一文件夹内或者正确链…

    JavaScript 2023年5月27日
    00
  • Asp.net中使用DapperExtensions和反射来实现一个通用搜索

    下面是关于Asp.net中使用DapperExtensions和反射来实现一个通用搜索的详细攻略。 简介 DapperExtensions是一个用于扩展Dapper ORM的库,它可以方便地进行一些高级查询操作。通常情况下,我们需要编写大量的重复代码来实现这些查询操作。而DapperExtensions就是为了解决这些问题而生的。在本篇文章中,我们将通过Da…

    JavaScript 2023年6月11日
    00
  • JS实现登录页面记住密码和enter键登录方法推荐

    下面是JS实现登录页面记住密码和enter键登录方法的攻略: 实现登录页面记住密码功能 通过 localStorage 存储用户名和密码 // 存储用户名和密码到 localStorage 中 localStorage.setItem(‘username’, ‘yourUsername’); localStorage.setItem(‘password’, …

    JavaScript 2023年6月11日
    00
  • Angular ElementRef简介及其使用

    Angular ElementRef是Angular中一个重要的类,它主要用于在组件中获取对应的DOM元素,从而能够操作它们的属性、样式和事件等。 ElementRef的基本用法 使用ElementRef很简单,只需要在组件中注入相应的服务即可。注入之后,我们就可以在组件中使用它了。例如: import { Component, ElementRef } f…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部