js中对象和面向对象与Json介绍

  1. JS中对象和面向对象

JS中的对象是一种复合数据类型,可以存储不同类型的数据,例如数字、布尔值、字符串、数组和函数等。对象以键值对的形式存储数据,每个属性都有一个唯一的键名和对应的值。

面向对象(Object Oriented,简称OO)是一种编程范式,强调将程序中的数据和操作数据的代码组织成一个相互依赖的对象,从而增强程序的可重复性、可维护性等特性。

JS中的面向对象编程中,我们可以使用构造函数、原型、继承等概念来实现对象的创建和维护。具体实现方式可以参考以下示例。

示例一:构造函数和原型的使用

//构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}

//原型方法
Person.prototype.introduce = function() {
    console.log("My name is " + this.name + ", and I am " + this.age + " years old.");
}

// 实例化对象
var person1 = new Person("Tom", 18);
var person2 = new Person("Jerry", 19);

// 调用原型方法
person1.introduce(); // My name is Tom, and I am 18 years old.
person2.introduce(); // My name is Jerry, and I am 19 years old.

示例二:继承的使用

//父类构造函数
function Animal(name, age) {
    this.name = name;
    this.age = age;
}

//父类原型方法
Animal.prototype.run = function() {
    console.log(this.name + " is running.");
}

// 子类构造函数
function Cat(name, age, color) {
    Animal.call(this, name, age); //继承属性
    this.color = color;
}

//子类继承父类原型方法
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

//子类新增原型方法
Cat.prototype.introduce = function() {
    console.log("I am a cat named " + this.name + ", and I am " + this.age + " years old. My fur is " + this.color);
}

// 实例化对象
var cat1 = new Cat("Coco", 3, "white");
var cat2 = new Cat("Blackie", 5, "black");

// 调用方法
cat1.run(); // Coco is running.
cat2.introduce(); // I am a cat named Blackie, and I am 5 years old. My fur is black.
  1. Json介绍

JSON全称为JavaScript Object Notation,是一种轻量级的数据交换格式。JSON使用易于人的形式来声明对象数据,可以轻松传递和交换,同时也很容易在多种语言之间进行解析和生成。

在JS中,我们可以通过使用JSON库,利用JSON.stringify()将对象转换为JSON格式,利用JSON.parse()将JSON格式数据转换为对象形式。具体实现方式可以参考以下示例。

示例一:将对象转换成JSON字符串

//JS对象
var obj = {
  name: "Tom",
  age: 18,
  hobby: ["reading", "coding"]
}

//使用JSON.stringify()转换成JSON字符串
var jsonStr = JSON.stringify(obj);
console.log(jsonStr);

输出结果如下:

{"name":"Tom","age":18,"hobby":["reading","coding"]}

示例二:将JSON字符串转换回对象格式

//JSON字符串
var jsonStr = '{"name":"Tom","age":18,"hobby":["reading","coding"]}';

//使用JSON.parse()将JSON字符串转换为对象格式
var obj = JSON.parse(jsonStr);
console.log(obj.name);
console.log(obj.age);
console.log(obj.hobby);

输出结果如下:

Tom
18
[ 'reading', 'coding' ]

通过以上示例,我们可以学习到JS中对象和面向对象编程的相关概念及实现方式,以及JSON的介绍和使用方法。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js中对象和面向对象与Json介绍 - Python技术站

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

相关文章

  • 浅谈JSON.stringify()和JOSN.parse()方法的不同

    当我们需要在不同的系统或应用程序之间传递数据时,使用JSON(JavaScript Object Notation)是很常见的。JSON.stringify()和JSON.parse()是两个JavaScript内置函数,用于将JavaScript对象转换为JSON格式的字符串,以及将JSON格式的字符串转换回JavaScript对象。虽然它们的作用看起来相…

    JavaScript 2023年5月27日
    00
  • create-react-app项目配置全解析

    create-react-app 项目配置全解析 create-react-app 是基于 React 的官方脚手架工具,使用 create-react-app 可以快速构建一个 React 应用,并且默认已经配置了一些开发所需的基础配置,可以省去我们自己手动配置的过程。 安装 使用 create-react-app 前需要先全局安装该工具,使用以下命令进行…

    JavaScript 2023年6月10日
    00
  • JS中的防抖与节流及作用详解

    JS中的防抖与节流是前端开发中非常重要的内容,在处理一些高频事件的时候能够很好地提高网页的性能和用户体验。下面,我将为大家详细讲解防抖与节流的具体概念和作用。 什么是防抖和节流? 防抖 防抖的概念是指当高频事件触发时,只有在事件触发间隔达到预设值时才会触发事件处理函数。也就是说,防抖能够让高频事件在预设时间段内最多只触发一次处理函数。 具体实现时,通常使用 …

    JavaScript 2023年6月11日
    00
  • Emberjs 通过 axios 下载文件的方法

    以下是详细讲解“Emberjs 通过 axios 下载文件的方法”的完整攻略。 什么是 Ember.js? Ember.js 是一款基于 JavaScript 编写的开源前端框架,它采用了 MVVM(Model-View-ViewModel) 模式,可以帮助我们开发具有高可维护性、高可扩展性的单页 Web 应用。 什么是 axios? axios 是一个基于…

    JavaScript 2023年5月27日
    00
  • 关于extjs treepanel复选框选中父节点与子节点的问题

    关于 ExtJS TreePanel 复选框选中父节点与子节点的问题,需要考虑到以下情况: 当选中父节点时,是否需要将其所有子节点也选中; 当选中子节点时,是否需要将其所有父节点也选中。 为了实现这样的功能需求,我们需要借助 ExtJS TreePanel 提供的以下两个属性: checkModel:指定树形节点的选择方式,一般设置为‘cascade’(级联…

    JavaScript 2023年6月11日
    00
  • vue路由实现登录拦截

    vue路由实现登录拦截是常见的前端开发技巧之一,有利于确保用户访问权限的安全性。下面我将为大家介绍如何利用vue路由实现登录拦截。具体步骤如下: 1. 使用vue-router实现路由拦截 在Vue Router中,可以通过导航钩子函数实现路由拦截,拦截器可以在跳转之前或之后执行一些操作,例如更改路由,验证用户权限等。 前置守卫(beforeEach) 在跳…

    JavaScript 2023年6月11日
    00
  • Javascript中字符串和数字的操作方法整理

    Javascript中字符串和数字的操作方法整理 JavaScript中有很多操作数字和字符串的方法。在本篇攻略中,我们将提供一些常用的方法,并提供两个示例。 字符串操作方法 1. .length属性 .length属性可以用来确定字符串中的字符数量。 const str = "Hello World"; console.log(str.…

    JavaScript 2023年5月19日
    00
  • 你可能不知道的JavaScript位运算符详解

    你可能不知道的JavaScript位运算符详解 介绍 在JavaScript中,除了常用的加减乘除运算符,还有一些位运算符。这些运算符可以对给定的数字进行二进制位操作。本文将为你详细讲解这些运算符。 位运算符分类 JavaScript中一共有7种位运算符,可以分为以下几类: 按位与运算符(&) 按位或运算符(|) 按位异或运算符(^) 左移运算符(&…

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