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

伟庭大师兄

已于 2023-08-29 10:03:16 修改

阅读量683

点赞数 13

分类专栏：计算机基础知识文章标签： javascript 原型模式 json 类的定义 js

于 2022-01-16 23:58:17 首次发布

本文链接：https://blog.csdn.net/weixin_45630258/article/details/122531227

版权

计算机基础知识专栏收录该内容

409 篇文章 6 订阅

订阅专栏

目录

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

二、类的种类（系统类、自定义类）

（1）常见的系统类 String、Date、Math

❀（2）自定义类【在es6前，js中没有定义类的语句class，是通过类的构造函数定义类的】（es6开始，class是定义类的语法糖）：

❀ 定义类（构造函数）的细节：

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

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

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

3、判断对象是否拥有某个属性，调用方法 hasOwnProperty(‘属性名’);

4、prototype 原理：

5、为什么说Object是所有类的父类：

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

五、json 对象

1、语法：{属性名：属性值，属性名：属性值，属性名：属性值……}

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

3、创建对象有两种方式（使用构造器的方式和使用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是定义类的语法糖）：

❀ 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();

    }
}

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

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


var p = new Person();
p.fn();

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/>');
}

■ for...in 遍历对象属性的细节：

□ 获取对象属性有两种方法：对象.属性名和对象['属性名']

//对于上面的例子，想要取出p对象中的属性，遍历时候需要写成p[i], 而不能写成p.i,这么写是给对象p动态添加上一个属性i

var p = new Person('小明', 12, '游戏');
for(var i in p){ //遍历获取对象的每个属性，并将遍历到的属性依次赋值给变量i
    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、判断对象是否拥有某个属性，调用方法 hasOwnProperty(‘属性名’);

■ 例如:

var p = new Object();

if(p.hasOwnProperty('String')){//判断p对象是否有String属性
    
}

4、prototype 原理：

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

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

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

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

5、为什么说Object是所有类的父类：

因为当类被系统加载时，创建出该类对应的原型对象，如何创建类的原型对象呢？

类名.propotype = new 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类下的一个对象