JavaScript 对象、函数和继承

JavaScript 中的对象和函数都是重要的概念。对象是一组键值对的集合,可以包含函数,而函数是执行任务和返回值的代码块。继承是一种机制,它允许我们在一个对象上定义对象的属性和属性行为,并通过 "继承",使一个对象能够访问另一个对象的属性和方法。

JavaScript 对象

JavaScript 中的对象是由花括号 {} 包裹的一组键值对。例如:

let person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'San Francisco',
    state: 'CA'
  },
  sayHi() {
    console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`)
  }
};

在上面的代码中,我们创建了一个 person 对象,它有一个 nameageaddress 属性,每个属性都有对应的值。address 属性是一个嵌套的对象,里面又有三个属性。sayHi 是一个函数,该函数可以输出相应的信息。

我们可以通过点号 . 或括号 [] 来访问对象的属性,例如:

console.log(person.name); // 输出 "John"
console.log(person['age']); // 输出 30
console.log(person.address.city); // 输出 "San Francisco"
person.sayHi(); // 输出 "Hi, my name is John and I am 30 years old."

JavaScript 函数

JavaScript 中的函数是一种代码块,它可以接受参数并返回值。例如:

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

console.log(add(2, 4)); // 输出 6

在上面的代码中,我们定义了一个 add 函数,它获取两个参数 ab,并返回它们的总和。

我们还可以使用箭头函数来定义函数,例如:

const add = (a, b) => a + b;

console.log(add(2, 4)); // 输出 6

在上面的代码中,我们使用了箭头函数来定义函数,这比常规函数要更简洁。

JavaScript 继承

JavaScript 中的继承是通过原型链来实现的。每一个对象都有一个指向其原型的内部属性 [[Prototype]],通过该属性,一个对象可以访问其父对象的属性和方法。例如:

let person = {
  name: 'John',
  age: 30,
  sayHi() {
    console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`)
  }
};

let student = Object.create(person);
student.major = 'Computer Science';

console.log(student.name); // 输出 "John"
console.log(student.major); // 输出 "Computer Science"
student.sayHi(); // 输出 "Hi, my name is John and I am 30 years old."

在上面的代码中,我们创建了一个 person 对象,并为 student 对象设置了其原型为 person,这样 student 就能够访问 person 对象的属性和方法了。此外,我们增加了 major 属性,该属性仅限于 student 对象。

对继承进行自定义时,我们可以使用 JavaScript 的 class 关键字来更简单地定义类。例如:

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

  sayHi() {
    console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

class Student extends Person {
  constructor(name, age, major) {
    super(name, age);
    this.major = major;
  }
}

let john = new Person('John', 30);
let jane = new Student('Jane', 22, 'Computer Science');

john.sayHi(); // 输出 "Hi, my name is John and I am 30 years old."
jane.sayHi(); // 输出 "Hi, my name is Jane and I am 22 years old."
console.log(jane.major); // 输出 "Computer Science"

在上面的代码中,我们使用 class 关键字来定义 PersonStudent 类。 Student 类从 Person 类继承,因此,Student 类可以访问其父类的所有属性和方法。super 方法在 Student 类的构造函数中被调用,用于传递参数并执行父类的构造函数。实例化对象后,我们可以使用 sayHi 方法打招呼,并访问 major 属性。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript 对象、函数和继承 - Python技术站

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

相关文章

  • vs2008 JavaScript 语法提示(Intellisense)功能

    下面是关于“vs2008 JavaScript 语法提示(Intellisense)功能”的完整攻略: 什么是Intellisense功能 Intellisense是Visual Studio编写代码时常用到的一个功能,它可以给开发人员提供实时的帮助和提示。Intellisense可以通过分析代码上下文以及被调用对象的成员和方法,来提供方法、属性和类型的完整…

    JavaScript 2023年6月10日
    00
  • JavaScript 自定义属性 data-*使用介绍

    JavaScript 自定义属性 data-*使用介绍 在 HTML5 中,我们可以使用自定义属性 data-* 来为 HTML 元素添加自定义属性,这些自定义属性可以用来存储任意类型的数据,也可以用 Javascript 来对其进行读写操作。 基本用法 语法格式如下: <element data-attributeName="value&q…

    JavaScript 2023年6月10日
    00
  • 使用mixins实现elementUI表单全局验证的解决方法

    使用mixins实现elementUI表单全局验证的解决方法 什么是mixins? 在Vue中,mixins是一种可复用功能的方式,其本质是一个对象,在Vue组件中通过mixins属性将其引入,可以让组件具备该对象的属性和方法。 elementUI表单全局验证的需求 在使用elementUI的表单组件时,我们往往需要对表单进行全局验证,例如输入框不能为空、手…

    JavaScript 2023年6月10日
    00
  • js操作输入框提示信息且响应鼠标事件

    下面是关于“js操作输入框提示信息且响应鼠标事件”的攻略。 步骤一:HTML结构 首先在HTML中定义一个输入框,例如: <input type="text" id="username" placeholder="请输入用户名"/> 在这个输入框中,我们设置了id和placeholder…

    JavaScript 2023年6月11日
    00
  • BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑

    Bootstrap是一款常用的前端开发框架,封装了很多常用的功能组件,如表单验证功能。但是在使用Bootstrap的表单验证组件时,我们可能会遭遇一些坑,其中比较典型的就是非Submit类型按钮点击时不能触发表单验证的问题。 下面是解决这个问题的攻略步骤: 步骤1:为非Submit类型按钮添加点击事件 首先,我们需要为非Submit类型按钮添加点击事件。在这…

    JavaScript 2023年6月10日
    00
  • java中文乱码之解决URL中文乱码问题的方法

    Java中文乱码之解决URL中文乱码问题的方法 在Java的开发中,经常会遇到中文乱码问题,其中URL中文乱码是开发者较为常见的问题之一,本篇文章将详细介绍Java中解决URL中文乱码方法。 URL中文乱码问题的原因 中文字符在计算机中以二进制流的形式存储,而URL中只能包含ASCII码字符,当URL中包含中文字符时,需要进行转换成编码形式,常用的包括URL…

    JavaScript 2023年5月19日
    00
  • js对象数组按属性快速排序

    下面就是关于“js对象数组按属性快速排序”的完整攻略: 1. 排序算法 在排序算法方面,我们可以使用JavaScript内置的sort()函数。sort()方法可以按照指定的方法对数组的元素进行排序,默认排序方式为按字母顺序。如果想要按属性对js对象数组进行排序,则需要传入一个比较函数。 比较函数的语法格式为: function compare(a, b) …

    JavaScript 2023年6月10日
    00
  • javascript实现将数字转成千分位的方法小结【5种方式】

    下面是讲解“JavaScript实现将数字转成千分位的方法小结【5种方式】”的完整攻略。 什么是千分位? 千分位是指将数字每隔三位加一个逗号表示的形式,比如:“1,234,567”。 为什么要使用千分位? 使用千分位可以使数字更加易读,尤其是对于大的数字更加方便观察。 实现方式 以下是五种JavaScript实现将数字转成千分位的方法: 方法一:toFixe…

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