学习javaScript必知必会(6)~类、类的定义、prototype 原型、json对象

简介: 学习javaScript必知必会(6)~类、类的定义、prototype 原型、json对象

一、定义类:经典做法——使用的是funciton,在es6之前因为在js中没有定义类的class语句,只有function.

■ 举例:

//定义一个Person类(通过类的无参构造函数定义类)
function Person(){}
var p = new Person();
p.name = '小明';
p.age = 12;


■ 在es6定义类的语法糖class跟java很像:

class Person{
  constructor(name,age){
        this.name=name;
        this.age=age;
    }
    play(){
        console.log("game");
    }
}


二、类的种类(系统类、自定义类)

(1)常见的系统类 String、Date、Math

1)String 类,字面量 '' 举例: var str = 'abc';

✿ 补充:
'' 字符串
[] 数组
{} 对象
// 正则表达式

① length

indexOf(string) 取得参数在字符串中出现的位置

substr(num1, num2) 截取字符串

④ toLowerCase()

⑤ toUpperCase()

replace(str1, str2) 字符串替换


2)Date 日期类

① getYear() getFullYear() getMonth() getDay()

② getDate()

③ getHours() getMinutes() getSeconds() getMilliseconds()


3) Math 数学类

① ceil(数值) floor(数值)

② min(数值1, 数值2) max(数值1, 数值2)

③ pow(数值1, 数值2)

④ random() 随机数

⑤ round(数值) 四舍五入

⑥ sqrt(数值) 开平方根


❀(2)自定义类【在es6之前,js中没有定义类的语句class,是通过类的构造函数定义类的】:

□ 在es6定义类的语法糖class跟java很像

❀ 1)语法:

function 类名() { //在js中没有定义类的语句class,是通过类的无参构造函数定义类
}
var 对象变量 = new 类名();


❀ 2)关于对象属性的使用:

对象.属性
对象['属性']


❀ 3)对象的属性是动态添加的,对象属性可以使用 . 或者 [''] 形式表示出来(对象的属性可以是任意数据类型)

//定义一个Person类(Person类的无参构造函数)
function Person(){}
var p = new Person();
p.name = '小明';
p['age'] = 12;


❀ 4)定义类通过类的有参构造函数:

■ 举例:

//定义一个Person类(Person类的有参构造函数)
function Person(name, age, hobby){
    this.name = name;
    this.age = age;
    this.hobby = hobby;
}
var p = new Person('小明', 12, '游戏');


❀ 定义类(构造函数)的细节:

定义类(构造函数)时,内部的方法需要以匿名函数(将方法赋值给类的属性)的方式定义,才能暴露给外界

■ 举例:定义类 内部的方法不是以匿名函数的方式(fn方法):

<input type="button" name="name" value='点一下' id="btn"/>
window.onload = function () {
    function Person() {//构造函数(函数)
        function fn() {
            console.log(this);
        }
    }
    document.getElementById('btn').onclick = function () {
        var p = new Person();
        p.fn();
    }
}



2.png


■ 举例:定义类 内部的方法以匿名函数的方式(将方法赋值给属性)(this.fn属性):

function Person() {//构造函数(函数)
       this.fn = function() {
            console.log('成功打印:' + this);
        }
    }
var p = new Person();
p.fn();


3.png


5)for…in 遍历对象的属性:

■ 举例:

//定义一个Person类(Person类的有参构造函数)
function Person(name, age, hobby){
    this.name = name;
    this.age = age;
    this.hobby = hobby;
}
var p = new Person('小明', 12, '游戏');
for(var i in p){
    document.write(i + ':' + p[i] + '<br/>');
}


6)关键字 constructor、typeof、instanceof、delete

  • constructor: 对象.constructor 返回对象的构造器
  • typeof: typeof 对象 返回对象的数据类型
  • instanceof: 对象 instanceof 类 判断对象是否是某个类的实例
  • delete: delete 对象.属性 删除对象的属性


三、prototype 原型(返回对象类型(类)原型的引用)

1、格式:class.prototype //获取类原型的引用

■ 举例:

//定义一个Person类
function Person(name, age) {
    this.name = name;
    this.age = age;
}
//获取类的原型Person.prototype, 并且给类添加属性nationlity
Person.prototype.nationality = "English";
//获取类的原型Person.prototype, 并且给类添加方法属性say
Person.prototype.say = function () {
    console.log('say hello');
};
//创建Person类的实例
var p = new Person("John", 50);
console.log(p.nationality);
p.say();


✿ 2、区分实例属性和静态属性:

**例如:定义了一个Person类,区分Person.prototype. nationality 和 Person. nationality **:

■ Person.prototype. nationality: 是指为Person类下的实例添加属性nationality

■ Person. nationality:是指为Person类添加静态属性nationality


3、prototype 原理:

□ js在加载每个构造器时,会创建对应的原型对象

□ 在构造器对象内部有一个prototype属性用来指向原型对象;

□ 在原型对象内部是有一个constructor属性用来指向构造器;

□ 一般实例化对象后,对象的属性是先在构造器中查找,找不到就到原型对象中找


4、为什么说Object是所有类的父类:

当系统为某个类构造器创建原型对象时,类名.prototype = new Object()

//即类的原型是Object的一个实例,原型对象拥有Object的所有属性,

所以说Object是所有类的父类


四、原型链(类的原型就是Object的一个实例对象, 而Object构造器又有其自身的Object原型对象 )


五、json 对象

1、语法:{属性名:属性值,属性名:属性值,属性名:属性值……}

键值对的集合,即json对象


2、定义对象的属性语法:

//定义一个json对象
var p1 = {name:'小明', age:12, sex:'女'}; //对象的属性可以不加单引号,不叫双引号
var p2 = {'name':'小明', 'age':12, 'sex':'女'};//对象的属性可以加单引号
var p3 = {"name":'小明', "age":12, "sex":'女'};//对象的属性可以加双引号

□ json对象是Object类下的一个对象


3、创建对象有两种方式(使用构造器的方式和使用json { } 的方式),有什么区别?

■ json 创建对象省略了构造器的定义(程序只需要定义一个对象时)

■ 构造器可以简化属性的定义(程序需要定义多个相同的属性或方法的对象)


目录
相关文章
|
6月前
|
JSON IDE Java
鸿蒙开发:json转对象插件回来了
首先,我重新编译了插件,进行了上传,大家可以下载最新的安装包进行体验了,还是和以前一样,提供了在线版和IDE插件版,两个选择,最新的版本,除了升级了版本,兼容了最新的DevEco Studio ,还做了一层优化,就是针对嵌套对象和属性的生成,使用方式呢,一年前的文章中有过详细的概述,这里呢也简单介绍一下。
242 4
鸿蒙开发:json转对象插件回来了
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
236 1
JavaScript中的原型 保姆级文章一文搞懂
|
存储 JSON JavaScript
JavaScript JSON
【10月更文挑战第7天】JSON 是 JavaScript 中非常重要的一个数据格式,它为数据的表示和传输提供了一种简单而有效的方式。掌握 JSON 的使用方法和特点,对于开发高质量的 JavaScript 应用具有重要意义。
|
JSON 前端开发 JavaScript
json字符串如何转为list对象?
json字符串如何转为list对象?
1984 7
|
JSON JavaScript 前端开发
js如何格式化一个JSON对象?
js如何格式化一个JSON对象?
536 3
|
存储 JavaScript 前端开发
Vue.js项目中全面解析定义全局变量的常用方法与技巧
Vue.js项目中全面解析定义全局变量的常用方法与技巧
242 0
|
存储 JavaScript 前端开发
|
JavaScript
js基础笔记学习247event对象3
js基础笔记学习247event对象3
147 0
js基础笔记学习247event对象3
|
JavaScript
js基础笔记学习309筛选jquery对象1
js基础笔记学习309筛选jquery对象1
165 0
js基础笔记学习309筛选jquery对象1
|
JavaScript
js基础笔记学习245event对象1
js基础笔记学习245event对象1
72 0
js基础笔记学习245event对象1

热门文章

最新文章