JavaScript函数、闭包、原型、面向对象学习笔记

yizhihongxing

JavaScript函数学习笔记

什么是函数

函数是 JavaScript 中的一个代码块,它可以重复执行,并且可通过传入参数和返回值来实现对信息的处理和存储。

函数的定义方式

JavaScript 中有多种定义函数的方式,以下是其中常用的三种方式:

1. 函数声明

使用 function 关键字定义的函数,代码如下:

function functionName (arg1, arg2, ..., argN) {
  // 函数体
  return returnValue;
}

其中 functionName 为函数名,arg1, arg2, ..., argN 为参数列表,return 为返回值关键字,returnValue 为返回值。

2. 函数表达式

可以将函数定义为一个变量,代码如下:

var functionName = function (arg1, arg2, ..., argN ) {
  // 函数体
  return returnValue;
}

其中 functionName 为变量名,arg1, arg2, ..., argN 为参数列表,return 为返回值关键字,returnValue 为返回值。

3. 箭头函数

ES6 引入了箭头函数的概念,代码如下:

var functionName = (arg1, arg2, ..., argN) => {
  // 函数体
  return returnValue;
}

其中 functionName 为变量名,arg1, arg2, ..., argN 为参数列表,return 为返回值关键字,returnValue 为返回值。

函数调用

调用一个函数时,需要将传入的参数放在括号内。代码如下:

function add (a, b) {
  return a + b;
}

add(1, 2); // 3

以上代码是调用 add 函数,传入 12 两个参数,并返回它们的和 3

闭包学习笔记

什么是闭包

闭包是在一个函数内部定义另一个函数,这个被定义的函数可以使用其外部函数的变量,但是外部函数却无法访问内部函数的变量。

闭包的作用

使用闭包可以在函数内部定义变量,并且可以避免这些变量对外部环境的污染。

闭包的示例

function outerFunction() {
  var a = 0;
  function innerFunction() {
    a++;
    console.log(a);
  }
  return innerFunction;
}

var fn = outerFunction();
fn(); // 1
fn(); // 2
fn(); // 3

以上代码中,我们在外部函数 outerFunction 中定义了变量 a 和内部函数 innerFunction,内部函数 innerFunction 又可以访问外部函数 outerFunction 中的变量 a,通过将内部函数 innerFunction 赋值给变量 fn 并且调用 fn 函数,a 变量的值被每次自增 1,并打印输出。

原型学习笔记

原型是什么

每个 JavaScript 对象都有一个原型对象,原型对象也是一个对象,或者说是当前对象的父对象。如果我们访问一个对象不存在的属性或方法时,JavaScript 就会在原型对象中查找,如果找到了就直接返回对应的值,如果没有找到,则继续在原型对象的原型对象中查找,直到找到或者到达顶层为止。

原型链是什么

JavaScript 对象之间通过原型来相互关联,形成了所谓的原型链。

构造函数与原型

JavaScript 中的每个函数对象都有一个 prototype 属性,这个属性指向了一个对象,这个对象就是实例化之后所有新创建对象的原型。

通过 new 关键字创建对象时,JavaScript 引擎会将对象的原型链接到构造函数的 prototype 属性所指向的对象上。

用一个简单的例子来说明:

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayName = function () {
  console.log('My name is ' + this.name);
}

var cat = new Animal('Tom');
cat.sayName();

以上代码中,我们定义了一个 Animal 构造函数,并在其 prototype 属性上添加了一个 sayName 方法。

我们通过 new 关键字创建了一个 cat 对象,cat 对象继承了 Animal.prototype 对象上的 sayName 方法,所以可以通过 cat.sayName() 来调用该方法,输出 My name is Tom

面向对象学习笔记

什么是面向对象

面向对象是一种编程思想,其基本概念是将数据和处理数据的方法绑定在一起,形成一个独立的对象。

面向对象的三个特征

  1. 封装:将数据和处理数据的方法包装起来,对外部不可见,只提供一些方法供外界使用。
  2. 继承:子类继承父类的属性和方法,可以重写父类的方法,子类也可以添加新的属性和方法。
  3. 多态:同一方法可以根据不同的对象实现不同的行为。

面向对象的示例

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function () {
  console.log('Hello, my name is ' + this.name + ', I am ' + this.age + ' years old.');
}

function Student(name, age, grade) {
  Person.call(this, name, age);
  this.grade = grade;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

Student.prototype.sayHello = function () {
  console.log('Hello, my name is ' + this.name + ', I am ' + this.age + ' years old, and I am a student in grade ' + this.grade);
}

var person = new Person('John', 30);
person.sayHello();

var student = new Student('Tom', 18, 'Grade 12');
student.sayHello();

以上代码中,我们定义了一个 Person 构造函数,并在其 prototype 属性上添加了一个 sayHello 方法。

通过继承 Person 构造函数,我们又定义了一个 Student 子类,并在子类中重写了 sayHello 方法,sayHello 方法输出了和 Person 类不同的内容。

通过 new 关键字创建了一个 person 对象,和一个 student 对象,并调用它们的 sayHello 方法。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript函数、闭包、原型、面向对象学习笔记 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • Javascript跨域请求的4种解决方式

    以下是关于JavaScript跨域请求的4种解决方式的完整攻略: 1. JSONP JSONP(JSON with Padding)是一种跨域数据请求的方式。它的实现原理是利用<script>标签不受同源限制的特性,通过动态创建<script>标签来实现跨域请求。 JSONP的具体实现流程如下: 在页面上添加一个<script&…

    JavaScript 2023年5月27日
    00
  • vue使用prop可以渲染但是打印台报错的解决方式

    在Vue中,组件间的数据传递是通过props进行的。然而,有时候我们会在控制台看到如下的错误信息: [Vue warn]: Invalid prop: type check failed for prop “xxx”. Expected xxx, got xxx. 这个错误信息通常是由于在传递过程中,子组件收到的props数据类型与它预期的不符,或者缺少必要…

    JavaScript 2023年6月11日
    00
  • 前端设计模式——享元模式

    享元模式(Flyweight Pattern):是一种用于优化对象创建和管理的设计模式。它旨在减少内存消耗和提高性能,通过共享具有相同状态的对象来实现这一目标。 具体来说,享元模式涉及两个主要的对象:享元工厂和具有共享状态的享元对象。享元工厂负责创建和管理共享对象,以确保每个对象只被创建一次。享元对象则包含需要共享的状态信息,并提供接口以访问该状态。 通过使…

    JavaScript 2023年4月18日
    00
  • Javascript Array concat 方法

    以下是关于JavaScript Array concat方法的完整攻略。 JavaScript Array concat方法 JavaScript Array concat方法用于将两个或多个数组合并成一个新数组。该方法不会改变原始数组,而是返回一个新的数组。 下面是一个使用concat方法的示例: var arr1 = [1, 2, 3]; var arr…

    JavaScript 2023年5月11日
    00
  • 浅谈JS中的bind方法与函数柯里化

    浅谈JS中的bind方法与函数柯里化 一、bind方法 1.1 bind方法的作用 bind()是JavaScript中所有函数对象都有的方法,它的作用是创建一个新的函数,称为绑定函数。当调用绑定函数时,this被设置为调用bind()时传入的第一个参数,该参数是this的绑定值,而后继参数则作为绑定函数的参数供调用。这种绑定是可以撤销的。 示例代码: va…

    JavaScript 2023年6月10日
    00
  • JS中Safari浏览器中的Date

    JS中的Date对象在不同的浏览器中表现可能有所不同,Safari浏览器中的Date对象也有其特点和注意事项。 Safari浏览器中的Date对象 获取当前时间 在Safari浏览器中,可以通过以下代码获取当前时间: var currentDate = new Date(); 根据时间戳创建Date对象 Safari浏览器中,可以使用以下代码根据时间戳创建D…

    JavaScript 2023年5月27日
    00
  • JavaScript中的对象序列化介绍

    下面是 JavaScript 中的对象序列化介绍的完整攻略。 概念解释 序列化是将一个对象转换成一个字符串或者字符流的过程,以便于存储和传输。在 JavaScript 中,我们通常使用 JSON(JavaScript Object Notation)进行序列化和解析,JSON 模块已经被包含在所有现代浏览器中了。 JSON.stringify() JSON.…

    JavaScript 2023年5月27日
    00
  • JavaScript 中的运算符和表达式介绍

    下面给你详细讲解一下“JavaScript 中的运算符和表达式介绍”的完整攻略。 运算符 在JavaScript中,运算符是用来进行各种数学和逻辑运算的符号。常见的运算符有以下几种。 算术运算符 算术运算符用于执行基本的数学运算,比如加、减、乘和除等。常用的算术运算符如下: 运算符 描述 + 加法 – 减法 * 乘法 / 除法 % 取余 ++ 自增 — 自…

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