javascript面向对象

发布于 2022-02-21 13:39:27

8330

文章被收录于专栏：OY_学习记录OY_学习记录

前言：笔记中的详细代码，我已经打包放在笔记的最后。

面向对象

1.1 对象（Object）

对象时 JS 中的引用户数类型

对象时一种复合数据类型，在对象可以保存多个不同数据类型的属性

使用 typeof 检查一个对象时，会返回 object

1.1.1 创建对象

方式一： var obj = new Object();

方式二： var obj = {};

代码示例

// 方式一:
var obj = new Object();
obj.name = "小明";
obj.age = 12;
obj.sex = 'M';
console.log(obj);
console.log(obj.name);

// 方式二
var obj2 = {};
obj2.name = "小红";
obj2.age = 12;
console.log(obj2.name);

1.1.2 向对象中添加属性

语法：

对象.属性名 = 属性值对象[“属性名”] = 属性值

对象的属性名没有任何的要求，不需要遵守表示符的规范，但是尽量按照表示符的要求去写。

属性值也可以任意的数据类型。

1.1.3 读取对象的属性

语法：

对象.属性名

对象[“属性名”]

如果读取一个对象吧没有的属性，它不会报错，而是返回一个 undefined

1.1.4 删除对象中的属性

语法：

delect 对象.属性名

delect 对象[“属性名”]

代码示例

var obj3 = new Object();
obj3.name = "小明";
console.log(obj3.name); //小明
delete obj3.name;
console.log(obj3.name);// undefined

1.1.5 使用 in 检查对象中是否含有指定的属性

语法：

“属性名 in 对象”

如果在对象中含有该属性，则返回 true

如果没有则返回 false

代码示例

console.log("name" in obj);

1.1.6 使用对象字面量，在创建对象时直接向对象中添加属性

语法：

var obj = {
	属性名.属性值，
	属性名.属性值
}

1.1.7 基本数据类型和引用数据类型

基本数据类型：

String Number Booolean Null Underfined

引用数据类型:

Object 基本数据类型的数据，变量是直接保存它的值。

变量与变量之间是相互独立的，修改一个变量不会影响其他的变量

引用数据类型的数据，变量是保存的对象的引用（内存地址）

如果多个变量指向的是同一个对象，此时修改一个变量的属性，会影响其他的变量。

比价两个变量时，对于基本数据了类型，比较的就是值，对于引用数据类型比较的是地址，地址相同才相同

1.2 函数（Function）

函数也是一个对象，也具有普通对象的功能

函数中可以封装一些代码，在需要的时候可以调用函数来执行这些代码

使用 typeof 检查一个函数是会返回 function

1.2.1 创建函数

函数声明

function 函数名(形参1,形参2...形参N){
   语句...
};

函数表达式

var 函数名 = function(形参1,形参2...形参N){
    语句...
};

代码示例

function fun(){
    console.log("这是一个函数");
    alert("哈哈哈");
    document.write("------(>_<)-----<br>");
}
fun();
var fun2 =  function(){
    console.log("这是一个函数2");
    alert("哈哈哈");
    document.write("这是一个函数");
}
fun2();

1.2.2 调用函数

语法：函数对象（[实参1，实参2...实参N]）;
    fun() 、sum()、alert()、Number()、parselnt()
当我们调用函数时，函数中封装的代码会按照编写的顺序执行

1.2.3 形参和实参

形参：形式参数

定义函数时，可以在()中定义一个或多个形参，形参之间使用，隔开定义形参就相当于在函数内声明了对应的变量但是并不赋值。形参会在使用时才赋值。

实参：实际参数

调用函数时，可以在()传递实参，传递的实参会赋值给对应的形参，调用函数时 JS 解析器不会检查实参的类型和个数，可以传递任意数据类型的值。

如果实参的数量大于形参，多余的实参将不会赋值

如果实参的小于形参，则没有对应实参的形参将会赋值 undefined

代码示例

function fun1(a, b, c){
    console.log(a + b +c);
}
fun1(1,2,3);

1.2.4 返回值

数的执行的结果

使用 return 来设置函数的返回值

语法： return 值;

该值就会成为函数的返回值，可以通过一个变量类接收返回值

return 后边的代码都不会执行。一旦执行到 return 语句时，函数就会立即退出。

return 后可以跟任意的类型值，可以是基本数据类型，也可以是一个对象。

如果 return 后不跟值，或者是不写 return 则函数默认返回 undefined。

break、coutinue 和 return

break 退出循环

continue 跳出当次循环

return 退出函数参数，函数的实参也可以是任意的数据类型

1.2.5 方法

可以将一个函数设置为一个对象的属性,当一个对象的属性是一个函数时，我们称这个函数该对象的方法

对象.方法名(); 函数名();

1.3 作用域

作用域简单来说就是一个变量的作用范围。

在 JS 中作用域分成两种：

<1> 全局作用域

全局作用域在打开页面时创建，在页面关闭时销魂。

在全局作用域中创建的变量都会作为 window 对象的属性保存，在全局作用域中创建的函数都会作为 window 对象的方法保存

<2> 函数作用域

函数作用域在函数执行时创建，在函数执行结束都会销毁。

当在函数作用域中使用一个变量时，它会先找自身的作用域寻找，

如果找到了则使用，找不到则继续往上找，一直找

<3> 变量的的声明提起

在函数作用域中，也具有改特性，使用 var 关键字声明的变量会在函数所在的代码执行前被声明的变量会在函数所有的代码执行前被声明，如果没有使用 var 关键字声明变量，则变量会变成全局变量

<4> 函数的声明提前

在函数作用域中，使用函数声明创建的函数，会在所有的函数中代码执行之前就创建好了。

代码示例

var a = 12;
var b = 10;
function fun(){
    console.log("我是fun函数");
}
function fun2( a, b){
    window.alert(a+b);
}
window.fun();
window.fun2(a,b);

fun();
// 函数声明，会被提前创建
function fun(){
    console.log("我是一个fun函数");
};
fun2();
// 函数表达式，不会提前创建
var fun2 = function () {
    console.log("我是fun2函数");
};

var a = 10;
function fun(){
    var a = 12;
    console.log("a的值为:"+a);
}
 fun(); // 12
function fun2(){
    console.log(a);
    var a = 12;
}
 fun2(); // undefined

function fun3(){
    console.log(a);
    a = 16;
}
fun3(); // 10
console.log(a); // 16

1.4 this(上下文对象)

我们每次调用函数时，解析器都会将一个上下文对象作为隐含的参数传递进函数。

使用 this 来引用上下文对象，根据函数的形式不同，this 的值也不同

this 的不同的情况：

1.函数不同的形式调用时,this 是 window

2.以方法的形式调用时,this 就是调用方法的对象

3.以构造函数的形式调用时，this 就是新创建对象

代码示例

function fun(){
    console.log(this.name);
}
var obj ={
    name : "小明",
    sayName : fun
};
var obj2 = {
    name : "小红",
    sayName : fun
};
obj.sayName(); //小明
obj2.sayName(); // 小红

1.5 构造函数

构造函数时专门用来创建对象的函数

一个构造函数我们也可以称为一个类通过一个构造函数创建的对象，我们称该对象时这个构造函数的实例

通过同一个构造函数创建的对象，我们称为一类对象构造函数就是一个普通的函数，只是它的调用方式不同，

如果直接调用，它就是一个普通函数

如果使用 new 来调用，则它就是一个构造函数

例子：

function Person(){

}

代码示例

function Person(name , age, gender ){
    this.name = name ;
    this.age = age;
    this.gendar =  gender;
    this.sayName = function(){
        alert(this.name);
    };
};

var p1 = new Person("小明",12,"男");
console.log(p1);
console.log(p1.age);

1.5.1 构造函数的执行流程

① 创建一个新的对象

② 将新的对象作为函数的上下文对象

③ 执行函数中的代码

④ 将新建的对象返回

1.5.2 instanceof 用来检查一个对象是否一个类的实例

语法：对象 instanceof 构造函数

如果该对象时构建函数的实例，则返回 true,否则返回 false

Object 是所有对象的祖先，所以任何对象和 Object 做 instanceof 都会返回 true

代码示例

console.log(p1 instanceof Person); // true

1.5.3 枚举对象中的属性

for…in

语法：

for(var 属性名 in 对象){

}

for…in 语句的循环体会执行多次，对象中有几个属性就会执行几次，每次将一个属性名赋值给我们定义的变量，我们可以通过它来获取对象中的属性。

代码示例

function fun() {
    alert(this.name);
}
function Person(name, age, gender){
    this.name = name;
    this.age = age;
    this.gendar = gender;
    this.sayName = fun;
};

var p1 = new Person("小明",12,"男");
p1.sayName();

for(var n  in p1){
    console.log("属性"+n);
    console.log("属性值:"+p1[n]);
}

1.6 原型(prototype)

创建一个函数以后，解析器都会默认在函数添加一个数 prototype

prototype 属性指向的是一个对象，这个对象我们称为原型对象。

当函数作为构造函数使用，它所创建的对象中都会含有一个隐含的属性执行该原型对象。

这个隐含的属性可以通过.** proto **来访问。

当原型对象就相当于一个公共的区域，凡是通过同一个构造函数创建的对象他们通常都可以访问到相同的原型对象

我们可以将对象中公有的属性和方法统一添加到原型的对象中，这样我们只需要添加一次就可以使所有的对象都可以使用。

当我们去访问对象的一个属性或调用对象的一个方法时，它会先自身中寻找，

如果在自身中找到，则直接使用。

如果没有找到，则去原型对象中寻找，如果找到了则使用，

如果没有找到，则去原型的原型中寻找，以此类推。直到找到 Object 原型为止，Object 的原型的原型的值为 null,

如果依然没有找到就返回 undefined

hasOwnProperty()

这个方法可以用来检查对象自身中含有某个属性

语法：对象.hasOwnProperty(“属性名”)

代码示例

1.7 数组（Array）

数组也是一个对象，是一个用来存储数据对象和 Object 类似，但是它的存储效率比普通对象要高

数组中保存的内容我们称为元素

数组使用索引(index)来操作元素

索引指由 0 开始的整数

1.7.1 数组的操作

创建数组：

var arr = [];

向数组中添加元素

数组对象[索引] = 值;

arr[1] = “hello”;

创建数组时直接添加元素

var arr = [元素 1，元素 2…元素 N];

var arr = [123,”hello”，true, null]

代码示例

获取和修改数组的长度

获取长度：

数组.length

length 获取到的是数组的最大索引+1

对于连续的数组，length 获取到的就是数组中元素的个数

修改数组的长度

数组.length = 新长度

如果修改后的 length 大于原长度，则多出的部分会空出来

如果修改的 length 小于原长度，则数组中多出的元素会被删除

向数组的最后添加元素

数组[数组.length] = 值

代码示例

1.7.2 数组的方法

push() 用来向数组的末尾添加一个或多个元素，并返回数组的新长度语法：数组.push(元素 1，元素 2,元素 N)
pop() 用来删除数组的最后一个元素，并返回被删除的新长度
unshift() 向数组的前边添加一个或多个元素，并返回数组的新长度
shuift() 删除数组的前边添加一个元素，并返回被删除的元素、
slice() 可以从一个数组中截取指定的元素该方法不会影响原数组，而是将截取到的内容封装为一个新的数组并返回参数：

1.截取开始位置的索引（包括开始位置）

2.截取结束位置的索引（不包括结束位置）

第二个可以省略不写，如果不写则一直截取到最后

参数可以传递一个负值，如果是负值，则从后往前数

splice() 可以用来删除数组中指定的元素，并使用新的元素替换该方法会将删除的元素封装到新的数组中返回参数：

1.删除开始位置的索引

2.删除的个数

3.三个以后，都是替换元素，这些元素将会插入到开始位置的索引的前边

1.8 函数

call()

apply()

这两个方法都是函数对象的方法需要通过函数对象来调用

通过两个方法都可以直接调用函数，并且可以通过第一个实参来指定函数中 this

不同的是 call 是直接传递函数的实参 apply 需要将实参封装到一个数组中传递

代码示例

arguments()

arguments 和 this 类似，都是函数中的隐含的参数

arguments 是一个类数组元素，它用来封装函数执行过程中的实参,所以即使不定义形参，也可以通过 arguments 来使用实参

arguments 中有一个属性 callee 表示当前执行的函数对象

代码示例

this

this 是函数的上下文对象，根据函数的调用方式不同会执行不同的对象

1、函数的形式调用时，this 是 window

2、以方法的形式调用的形式调用时，this 是调用方法的对象

3、以构造函数的形式调用时，this 是新建的那个对象

4、使用 call 和 apply 调用时，this 是指的那个对象

5、在全局作用域中 this 代表 window

1.9 包装类

在 JS 中为我们提供三个包装类：（不推荐）

String() Boolean() Number()

通过这三个包装类可以创建基本类型的对象

例子：

var num = new Number(2)

var str = new String(“hello”)

var bool = new Boolean(true)

但是在实际应用中千万这么干。

当我们去操作一个基本数据类型的属性和方法时，

解析器会临时将其转换为对应的包装类，然后再去操作属性和方法，

解析完成以后在将这个临时对象进行销毁。

1.10 字符串的相关方法

1.10.1 length

获取字符串的长度

1.10.2 charAt()

根据索引获取指定的字符

1.10.3 charCodeAt()

根据索引获取指定的字符编码

1.10.4 String.fromCharCode()

根据字符编码获取字符

1.10.5 indexOf()

1.10.6 lastindexOf()

从一个字符串中检索指定内容

需要一个字符串作为参数，这个字符串就是要检索的内容，如果找到该内容，则会返回其第一次出现的索引，如果没有找到则返回-1。

可以指定第二个参数，来表示开始查找的位置

indexOf()是从前往后找

lastindexOf()是从后向前找

1.10.7 slice()

可以从一个字符串中截取指定的内容，并将截取到的内容返回，不会影响变量

参数：

第一个:截取开始的位置（包括开始）

第二个：截取结束的位置（不包括结束）

可以省略第二个参数，如果省略则一直截取到最后

可以传负数，如果是负数则从后往前数

1.10.8 substr()

和 slice()基本一致，不同的是它不能接受负值作为一个参数，如果设置一个负值，则会自动修正为 0

substring()中如果第二个参数小于第一个，自动调整位置

1.10.9 toLowerCase()

将字符串转换为小写并返回

1.10.10 toUpperCase()

将字符串转换为大写并返回

1.10.11 split()

可以根据指定内容将一个字符串拆分为一个数组

参数：

需要一个字符串作为参数，将会根据字符串去拆分数组

可以接收一个正则表达式，此时会根据正则表达式去拆分数组

1.10.12 match()

可以将字符串中和正则表达式匹配的内容提取出来

参数：

正则表达式，可以根据该正则表达式将字符串中符合要求的内容提取出来并且封装到一个数组中返回

1.10.13 replace()

可以将字符串中指定内容替换为新的内容

参数：

第一个：被替换的内容，可以是一个正则表达式

第二个：替换的新内容

1.10.14 search()

可以根据正则表达式去字符串中查找指定的内容

参数：

正则表达式，将会根据该表达式查询内容，并且将第一个匹配到的内容的索引返回，如果没有匹配到任何内容，则返回-1。

代码示例

// 创建一个字符串
var str = "Hello world";

/**
 * length 属性
 */
console.log(str.length); // 11
/**
 * charAt()
 */
var result = str.charAt(2);
console.log(result); // l
/**
 * charCodeAt()
 */
var result = str.charCodeAt(0);
console.log(result); // 72
/**
 * String.fromCharCode()
 */
var result = String.fromCharCode(0x2692);
console.log(result); // ⚒
/**
 * concat()
 */
result = str.concat("你好，世界");
console.log(result); // Hello world你好，世界
/**
 * indexof()
 */
str = "hello , worid";
result = str.indexOf("h",1);
console.log(result); // -1
result = str.lastIndexOf("h",5);
console.log(result); // 0
/**
 * slice()
 */
str = "hello , world";
result = str.slice(1,4);// ell
result = str.slice(1,-1);
console.log(result); // ello , worl
/**
 * substring()
 */
result = str.substring(0,1); // h
console.log(result);
/**
 * substr()
 */
result = str.substr(3,2); // lo
console.log(result);
/**
 * split()
 */
str = "abcdefg";
result = str.split("d");
console.log(result); // ["abc", "efg"]

/**
 * toUpperCase()
 */
str = "abcdefg";
result = str.toUpperCase();
console.log(result); // ABCDEFG
/**
 * toLowerCase()
 */
str = "ABCDEFG";
result = str.toLocaleLowerCase();
console.log(result); // abcdefg

var str = "1a2b3c4d5e6f7";
/**
 * split()
 */
// 用任意的字母来将字符串拆分
var result = str.split(/[A-z]/);

console.log(result);

str = "hello abc hello aec afc";
/**
 * search()
 */
result = str.search(/a[befj]c/);

console.log(result);// 6

str = "1a2a3a4a5e6f7A8B9C";
/**
 * match()
 */
result = str.match(/[a-z]/ig);
console.log(result[2]); // a
/**
 * replace()
 */
result  = str.replace(/[a-z]/gi,"");
console.log(result); // 123456789

1.11 Date

日期的对象，在 JS 中通过 Date 对象来表示一个时间

创建对象

创建一个当前的时间对象

var d = new Date();

创建一个指定的时间对象

var d = new Date(“月/日/年时:分:秒”);

方法：

getDate()

当前日期对象是几日（1-31）

getDay()

返回当前日期对象时周几（0-6）

0 周日

1 周一。。。

getMonth()

返回当前日期对象的月份（0-11）

0 一月

1 二月。。。

getFullYear() 从 Date 对象以四位数字返回年份。

getHours() 返回 Date 对象的小时 (0 ~ 23)。

getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。

getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。

getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。

getTime()

返回当前日期对象的时间戳

时间戳，指的是从 1970 年月 1 日 0 时 0 分 0 秒，到现在时间的毫秒数

计算机底层保存时间都是以时间戳的形式保存的。

Date.now()

可以获取当前代码执行时的时间戳

代码示例

var d = new Date(); // Sun Jun 28 2020 17:51:48 GMT+0800 (中国标准时间)
console.log(d);

var d = new Date("2/18/2011 11:10:30");
/**
 * getDate()
 */
var date = d.getDate();
console.log(date); // 18
/**
 *  getDay()
 *  会返回一个0-6的值
 *      0 表示周日
 *      1 表示周一
 */
date = d.getDay();
console.log(date); // 5
/**
 *  getMonth()
 *  会返回一个0-11的值
 *      0 表示1月
 *      1 表示2月
 *      11 表示12月
 */
var month = d.getMonth();
console.log(month); // 1
/**
 *  getFullYear()
 */
var year = d.getFullYear();
console.log(year); // 2011
/**
 *  getTime
 *  获取当前日期对象的时间戳
 */
var time = d.getTime();
console.log(time); // 1297998630000

1.12 Math

Math 属于一个工具类，它不需要我们创建对象，它里边封装了属性运算相关的常量和方法

我们可以直接使用它来进行数学运算相关的操作

方法：

Math.PI

常量，圆周率

Math.abs()

绝对值运算

Math.ceil()

向上取整

Math.floor()

向下取整

Math.round()

四舍五入取整

Math.random()

生成一个 0-1 之间的随机数

生成一个 x-y 之间的随机数

==Math.round(Math.random()*(y-x)+x);==

Math.pow(x,y)

求 x 的 y 次幂

Math.sqrt()

对一个数进行开方

Math.max()

求多个数中最大值

Math.min()

求多个数中的最小值

代码示例

/**
 * Math.PI
 */
console.log(Math.PI); // 3.141592653589793
/**
 * abs()
 */
console.log(Math.abs(-1)); // 1
/**
 * Math.ceil()
 * Math.floor()
 * Math.round()
 */
console.log(Math.ceil(1.234)); // 2
console.log(Math.floor(1.2334));// 1
console.log(Math.round(2.5)); // 3

/**
 * Math.random()
 *  生成一个0-x之间的随机数
 *   Math.round(Math.random()*x)
 *  生成一个x-y之间的随机数
 *   Math.round(Math.random()*(y-x)+x)
 */
// 生成一个0-10的随机数
console.log(Math.random()); // 0.6920747685502069
// 生成一个0-20的随机数
console.log(Math.random()*20); // 9.90282879250878
// 生成一个1-20的随机数
console.log((Math.random()*19)+1); // 6.28945228050076

/**
 * max() 可以获取多个数组的最大值
 * min() 可以获取多个数组中的最小值
 */
console.log(Math.max(10,45,30,100)); // 100
console.log(Math.min(10,45,30,100));// 10
/**
 * pow(x,y)
 */
console.log(Math.pow(2,3)); // 8

/**
 * sqrt()
 */
console.log(Math.sqrt(4)); // 2

1.13 正则表达式

正则用来定义一些字符串的规则，程序可以根据这些规则来判断一个字符串是否符合规定，也可以将一个字符串符合规则的内容提取出来。

1.13.1 创建正则表达式

var reg = new RegExp(“正则”,”匹配模式”)

var reg = /正则表达式/ 匹配模式

语法

匹配模式:

i ：忽视大小写

g : 全局匹配模式

设置匹配模式时，可以都不设置，也可以设置 1 个，也可以全设置，设置时没有顺序要求

1.13.2 正则语法：

语法：

\|	或	[A-Z]	大写字母
[]	或	[A-z]	任意字母
[^]	除了	[0-9]	任意数字
[a-z]	小写字母

量词：

{n}	正好 n 次	+	至少 1 次 {1,}
{m,n}	m-n 次	?	0 次或 1 次 {0,1}
{m,}	至少 m 次	*	0 次或多次 {0,}

转义字符：

\ .	表示.	\\	表示\
.	表示任意字符	\w	相当于[A-z0-9_]
\W	相当于[ ^ A-z0-9]	\d	任意数字
\D	除了数字	\s	空格
\S	除了空格	\b	单词边界
\B	除了单词边界	^	表示开始
$	表示结束

1.13.3 方法

test()

可以用来检查一个字符是否符合正则表达式

如果符合返回 true,否则返回 false

代码示例

var reg = new RegExp("ab","i");
var str = "a";
console.log(reg.test(str)); // false

var reg = /a/i; // true
console.log(reg.test("abc"));

reg = /a|b|c/; // true
console.log(reg.test("adfasdscvd"));

reg = /[a-z]/;
console.log(reg.test("asddf")); // true

//检查一个字符串中是否含有 abc 或 adc 或 aec
reg = /a[bde]c/;
console.log(reg.test("abc"));// true

reg = /[^ab]/;
console.log(reg.test("bcds")); // true

reg = /[^0-9]/;
console.log(reg.test("234234234532")); // false

// 邮箱正则表达式
			 * 电子邮件
			 * 	hello  .nihao          @     abc  .com.cn
			 *
			 * 任意字母数字下划线    .任意字母数字下划线  @   任意字母数字     .任意字母（2-5位）   .任意字母（2-5位）
			 *
			 * \w{3,}  (\.\w+)*  @  [A-z0-9]+  (\.[A-z]{2,5}){1,2}
			 */

			var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;

			var email = "abc.hello@163.com";

			console.log(emailReg.test(email));

可以用 vscode 和 notepad++ 打开

链接：https://pan.baidu.com/s/1yfS00YJtShuZVncxzWUrvw

提取码：7q9u

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-07-12，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

正则表达式

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

正则表达式