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

针对“谈谈我对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日

相关文章

  • JS取request值以及自动执行使用示例

    当我们需要从前端页面向后台传递数据时,通常都需要通过url传递一些参数。而后台处理这些参数时,就需要通过解析请求中包含的请求体(body)或请求头(header)来获取这些参数值。下面就来讲解一下JS如何取得request中的值。 一、JS获取URL参数 在前端页面中,我们可以通过获取window.location对象来获取当前url。而当前url中所包含的…

    JavaScript 2023年6月11日
    00
  • Web Uploader文件上传插件使用详解

    Web Uploader文件上传插件使用攻略 Web Uploader是一款基于HTML5的文件上传插件,可以通过它来实现文件上传功能。下面将介绍Web Uploader的使用方法和相关示例。 一、环境准备 首先,需要在web页面中引入Web Uploader的相关js和css文件,以及Jquery库。可以通过CDN引入,也可以下载到本地使用。 <li…

    JavaScript 2023年5月27日
    00
  • js函数中onmousedown和onclick的区别和联系探讨

    我们就按照以下步骤来讲解 js 函数中 onmousedown 和 onclick 的区别和联系。 1. onmousedown 和 onclick 的作用 在开始讲解 onmousedown 和 onclick 的区别之前,我们先来了解一下它们的作用。 onmousedown:当鼠标按下某个元素时触发。 onclick:当鼠标点击某个元素时触发。 这两个事…

    JavaScript 2023年5月28日
    00
  • javascript 事件对象 坐标事件说明

    “javascript 事件对象 坐标事件说明”是一个非常重要的主题,它关乎到网页中处理与用户的鼠标或者键盘交互相关的操作。在这个主题中,可以学习到如何获取事件对象,以及如何处理不同类型的坐标事件,例如鼠标的点击、移动或者键盘的按下事件等等。下面我们一起来详细讲解一下这个主题。 获取事件对象 在JavaScript中,处理事件需要获取事件对象,然后通过事件对…

    JavaScript 2023年6月10日
    00
  • JavaScript的History API使搜索引擎抓取AJAX内容

    JavaScript的History API是HTML5标准中新增加的一个API,主要用来处理浏览器的历史记录和URL。同时,它也提供了许多操作浏览器历史记录的方法,其中的一个重要的方法就是pushState()。pushState()方法能够把state对象和修改后的URL添加到浏览器的历史记录中,而且并不会刷新页面。 通过使用pushState()方法,…

    JavaScript 2023年6月11日
    00
  • js 面向对象学习笔记

    关于JS面向对象的学习,我们可以分为以下步骤: 1. 了解什么是面向对象编程 面向对象编程(OOP)是一种编程范式或编程风格,其主要思想是通过类和实例来描述和组织代码,将数据和行为封装在对象内部,对外提供接口进行访问和操作。 2. 学习面向对象的基本术语 在 OOP 中,有以下基本概念需要了解: 类(Class):定义对象的属性和方法的蓝图 对象(Objec…

    JavaScript 2023年5月18日
    00
  • 详解JavaScript数组reduce()方法的高级技巧

    标题:详解JavaScript数组reduce()方法的高级技巧 什么是reduce()方法 reduce()方法是javascript数组中的一个高级迭代方法,用于将数组中的元素通过一个函数归纳为单个值。reduce()方法适用于对数组的每个元素进行降维处理,并返回一个值,在实际开发中非常有用。 reduce()方法的基本语法 arr.reduce(cal…

    JavaScript 2023年6月10日
    00
  • 2021年值得向Python开发者推荐的VS Code扩展插件

    下面是详细讲解“2021年值得向Python开发者推荐的VS Code扩展插件”的完整攻略。 1. 简介 VS Code 是一款免费开源的轻量级编辑器,支持多种编程语言,Python 是其中之一。丰富的扩展插件使得 VS Code 更加强大,可以让开发者更加高效地编写 Python 代码。本攻略将介绍一些值得向 Python 开发者推荐的扩展插件。 2. 推…

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