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

相关文章

  • javascript+css实现进度条效果

    下面是实现进度条效果的攻略: 1.基本原理 进度条通常是在页面的顶部或底部显示的,用来展示某个任务的完成进度。实现进度条的基本原理是,通过JavaScript控制元素的宽度达到动画效果。然后结合CSS使进度条更美观。 2. 实现步骤 2.1 HTML结构 首先需要在HTML中添加进度条的结构,通常情况下进度条是一个<div>元素,同时为了更好地控…

    JavaScript 2023年6月10日
    00
  • 让alert不出现弹窗的两种方法

    下面我来详细讲解“让alert不出现弹窗的两种方法”。 方式一:使用 console.log 在 JavaScript 中,除了 alert 还有一个常用的调试工具就是 console.log。它可以在浏览器的控制台打印输出信息,便于我们查看函数的执行情况和数据的变化情况。 示例代码如下: function showMessage() { console.l…

    JavaScript 2023年6月11日
    00
  • JavaScript 学习点滴记录

    JavaScript 学习指南 前言 JavaScript 是一种脚本语言,普遍应用于 Web 开发中。JavaScript 是一种动态的、弱类型解释性语言,并且具有多范式的特性,如面向对象、命令式、声明式等。 在学习 JavaScript 的过程中,我们需要学习它的基本语法和常见的应用。随着学习的深入,我们可以从以下几个方面来拓展自己的知识面: 前端框架和…

    JavaScript 2023年5月27日
    00
  • 关于JavaScript中string 的replace

    下面是关于JavaScript中string的replace的详细攻略。 什么是replace replace() 方法是 JavaScript 中的字符串方法,它用于在字符串中查找一个指定的子串,并用另一个字符串替换它。这个替换过程是不影响原字符串,而是产生一个新的字符串。 replace() 方法接收两个参数:第一个是需要查找的子串或正则表达式,第二个是…

    JavaScript 2023年5月28日
    00
  • Sanic框架Cookies操作示例

    下面我来详细讲解一下“Sanic框架Cookies操作示例”的完整攻略。 一、什么是Cookies? 一般来说,Cookies是一个小型的文本文件,可以在客户端浏览器上存储一些简单的用户信息,比如登录状态、浏览历史、购物车信息等。 在Web开发中,Cookies经常被用来跟踪用户的行为,比如记录用户的喜好,让广告展示更精准;或者保存用户的登录状态,方便下次登…

    JavaScript 2023年6月11日
    00
  • JavaScript 节流函数 Throttle 详解

    JavaScript 节流函数 Throttle 详解 什么是节流函数 函数节流是一种通过控制函数执行频率的技术,可以让我们控制一个函数在一段时间时间内执行多少次。它可以解决一些频繁触发事件的问题,例如页面滚动的触发事件。 为何需要使用节流函数 在一些需要频繁执行的L函数中,比如页面滑动事件,如果不做任何优化处理,就会导致多次重复计算、频繁造成 DOM 渲染…

    JavaScript 2023年5月27日
    00
  • 浅谈js的ajax的异步和同步请求的问题

    浅谈JS的Ajax的异步和同步请求的问题 什么是Ajax? 在Web开发中,Ajax是一种在不重新加载整个页面的情况下与服务器交换数据的技术。它使页面可以异步地(意味着不重新加载整个网页)更新并显示某一部分内容。 异步请求和同步请求的区别 在Ajax中,请求有两种方式,异步和同步。 异步请求: 异步请求意味着当请求被发送后,页面可以在等待服务器响应的同时进行…

    JavaScript 2023年6月11日
    00
  • javascript dom 操作详解 js加强

    Javascript DOM 操作详解 简介 DOM(Document Object Model),即文档对象模型,是指HTML或XML文件的一个存储模型。使用DOM,我们可以通过Javascript来操作网页上的内容和结构,实现动态效果。本文旨在介绍Javascript DOM的相关知识,包括节点遍历、元素获取、属性操作、样式操作、事件绑定等内容。 节点遍…

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