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日

相关文章

  • JS作为值的函数用法示例

    JS作为值的函数用法示例即为将函数定义作为一个值来使用,可以将函数定义作为一个变量赋值给变量、集合或对象中的属性,也可以将函数作为一个参数传递给其他函数。下面是两个示例说明: 示例一:将函数作为参数传递给其他函数 // 定义一个函数 function sayHi(name) { console.log(‘Hi ‘ + name + ‘!’); } // 定义…

    JavaScript 2023年5月27日
    00
  • JavaScript基础之立即执行函数

    JavaScript基础之立即执行函数 在JavaScript中,立即执行函数(Immediately Invoked Function Expression,IIFE)是一个非常重要的概念。本文将详细介绍什么是立即执行函数以及如何使用它。 什么是立即执行函数 立即执行函数是指在定义后立即执行的函数。它的形式如下: (function() { // 函数体 …

    JavaScript 2023年5月27日
    00
  • 浅谈ajax在jquery中的请求和servlet中的响应

    AJAX在jQuery中的请求 1.1 基本概念 AJAX是浏览器与服务器之间异步传输数据的一种技术,可以在不刷新整个页面的情况下更新页面的部分内容。jQuery是一个JavaScript库,常用于进行AJAX请求。 1.2 使用方法 使用jQuery发送AJAX请求的基本语法如下: $.ajax({ type: "POST", // G…

    JavaScript 2023年6月11日
    00
  • JavaScript构造函数详解

    JavaScript构造函数详解 什么是构造函数? 构造函数是一种特殊类型的函数,用于创建对象。构造函数通常情况下的命名都以大写字母开头。构造函数可以被用于创建多个相同类型的对象。 构造函数的语法 function ConstructorName(param1, param2) { this.property1 = param1; this.property…

    JavaScript 2023年5月27日
    00
  • js+css实现卡片轮播图效果

    下面是“js+css实现卡片轮播图效果”的完整攻略。 1. 概述 卡片轮播图指的是一种类似于滑动门的效果,即多个内容块轮流展示在同一个位置上的效果。在实现卡片轮播图的过程中,我们需要用到HTML、CSS、JS三种语言。 2. HTML 首先,我们需要在HTML中定义卡片轮播图的容器。 <div class="carousel"&gt…

    JavaScript 2023年6月11日
    00
  • JavaScript Array对象使用方法解析

    JavaScript Array对象使用方法解析 概述 JavaScript中的Array对象是一个非常重要的数据结构类型,可以用来存储相同类型的数据,并且可以通过封装在Array对象上的各种方法,方便地进行增、删、改、查等操作。本文将详细地解析JavaScript Array对象的使用方法,包括数组的创建、增删元素、遍历、排序、查找等操作。 数组的创建 方…

    JavaScript 2023年5月27日
    00
  • Javascript Global对象

    当程序运行后,JavaScript代码可以访问一个称为Global对象的对象。它是预定义的全局对象,提供许多JavaScript库中常用的工具和函数。 全局对象的属性 全局对象提供许多属性,一些常用的如下: Infinity:表示无穷大的数 NaN:表示数字类型无效时的值 undefined:表示未定义值的原始数据类型 全局对象的方法 除了属性之外,全局对象…

    JavaScript 2023年5月27日
    00
  • javacript获取当前屏幕大小

    获取当前屏幕大小可以通过JavaScript的内置对象window来实现。使用window对象提供的属性和方法可以获取浏览器窗口的相关信息。 方法一:使用innerWidth和innerHeight属性获取屏幕大小 window.innerWidth属性返回浏览器窗口的视口宽度,即不包括滚动条的宽度。window.innerHeight属性返回浏览器窗口的视…

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