谈谈我对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 实现倒计时数字时钟效果【附实例代码】

    JS 实现倒计时数字时钟效果是一个比较常见的前端特效,本文将为大家分享如何实现这个效果并附上实例代码。以下是完整攻略: 第一步:HTML 基础 首先,我们需要在 HTML 中创建一个数字时钟展示区域,可以选择一个 div 包含一个 h1 标签或者直接使用 h1 标签。具体代码如下: <div id="countdown-clock"…

    JavaScript 2023年5月27日
    00
  • window.event快达到全浏览器支持了,以后使用就方便了

    首先需要认识到 window.event 是在IE浏览器中出现的一个全局事件对象,通过该对象可以获取当前页面中发生的事件的信息,例如事件类型、事件目标、事件源等。而其他浏览器中并没有实现此对象,因此在跨浏览器开发时,我们需要统一处理事件对象的获取方法。 随着前端技术的发展,现在在大多数浏览器中都添加了对 window.event 的支持,但在某些移动端浏览器…

    JavaScript 2023年6月10日
    00
  • JS如何根据条件取出数组中对应项

    根据您的要求,我来详细讲解一下“JS如何根据条件取出数组中对应项”的完整攻略。 1. 使用filter()方法 filter()方法可以创建一个新数组,其中包含满足指定条件的所有元素。其接受一个回调函数作为参数,可以指定一个条件来筛选数组中的元素。该回调函数接受数组中的每个元素作为参数,返回 true 或 false。如果返回 true,则将该元素添加到新数…

    JavaScript 2023年5月27日
    00
  • JS 操作Array数组的方法及属性实例解析

    JS 操作Array数组的方法及属性实例解析 在JavaScript中,数组(Array)是一种非常常见的数据结构,它能够存储多个值,并且可以动态地添加、删除、修改元素。本文将详细讲解JavaScript中操作Array数组的方法及属性。 创建数组 在JavaScript中,可以使用[]或new Array()两种语法创建一个数组。其中,[]更为常见。 //…

    JavaScript 2023年5月27日
    00
  • webpack自定义loader全面详解

    webpack自定义loader全面详解 什么是loader 在webpack的构建过程中,通过loader可以对文件进行转换处理。loader可以将文件从不同的语言(例如:TypeScript)转换为JavaScript,或将内联图像转换为data URL。webpack本身只能理解JavaScript和JSON文件,而loader能够让webpack处理…

    JavaScript 2023年6月10日
    00
  • JavaScript Ajax请求

    JavaScript Ajax请求的完整攻略: 1. 创建XMLHttpRequest对象(XHR) 创建XHR对象是Ajax请求的第一步。XHR是一个内置的JavaScript对象,允许在不刷新页面的情况下向服务器发送请求。 var xhr = new XMLHttpRequest(); 2. 准备请求 在发起请求之前,需要设置请求的各个参数,如请求类型、…

    Web开发基础 2023年3月30日
    00
  • JavaScript中块级作用域与函数作用域深入剖析

    JavaScript中块级作用域与函数作用域深入剖析 在JavaScript中,作用域是指在程序中可以直接访问变量的区域。JavaScript中常见的两种作用域是块级作用域和函数作用域。本文将深入讲解JavaScript中块级作用域和函数作用域的内部原理。 块级作用域 块级作用域指定义在代码块内部的变量和函数。在ES6之前,JavaScript并没有块级作用…

    JavaScript 2023年6月10日
    00
  • 写jQuery插件时的注意点

    下面是写jQuery插件时的注意点: 1. 设计清晰的API 设定良好的API是设计插件时最重要的一步。优秀的API可以使插件更好地适应用户需求,也可以帮助其他开发者更容易地集成插件。 一般来说,良好的API应该包含以下几个方面: 默认配置 方法和事件 命名空间 回调函数 例如下面的代码: $.fn.myPlugin = function(options){…

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