JavaScript基础知识（10）

关注

原创最新推荐文章于 2026-02-26 08:21:39 发布 412 阅读 AI 写同款· GEO 优化 ›

JavaScript(ES6-10)语法详解 —— ES6基础知识【数组】 ES5中数组有多少种遍历的方法 JS中遍历的方法 for - 写法繁琐，但支持break和continue forEach - 写法简洁，但不支持break和continue every - 向下遍历时需要返回true，若不返回true则相当于break【故可以支持break和continue的概念】 for-in - 由于数组也是对象，故若无故给数组了对应的属性值，则也会通过for-in遍历出来。且for-in是可以使用break和continue的，但是for-in的index是string类型实例阅读详情

方法名后何时加圆括号？调用方法，立即执行，就加();将方法作为对象传递，不加()

闭包：函数使用了不属于自己的局部变量

闭包的问题：

1.普通方法调用完，活动对象回收。但是闭包方法导致父活动对象不释放，所以闭包方法会占用更多内存空间。

重新获得闭包，闭包内的局部变量都重置

2.闭包中多个方法，访问的是同一个局部变量。只要变量变化，所有方法都受影响。

将n放到参数里面可以实现获得一个随机的n值，但是n也属于局部变量，这种方法和之前的方法一样，都是闭包，区别就是之前的方法外界不能修改n值，而这种方法可以在首次赋值时设置n值，一般建议用这个方法

function counter(n){

function getUnique(){

return n++;

}

return getUnique;

}

var c=counter(10); //获得n的值，且仅获得一次

console.log(c());

n=0;

console.log(c());

c=null;

c=counter(101);

console.log(c());

要想修改闭包内的变量，只能用闭包自己的方法。

function counter(){

var n=0;

var getUnique=function(){return n++;}

var reset=function(){n=o;} //reset活动对象里面什么都没有的，没有var和参数定义，这个n不属于reset里面的

return [getUnique,reset]; //返回多个方法，可以放到数组里。方法就是对象,只要是对象都可以放到数组中

}

var funs=counter(); //获得多个方法的数组，等于var funs=[function(){return n++;},function(){n=o;}]

console.log(funs[0]()); //取出第一个方法让它立即执行

console.log(funs[0]()); //1

console.log(funs[0]()); //2

n=0;

console.log(funs[0]());

funs[1](); //调出reset方法，将方法重置。reset里面的n和getUnique里面的n是同一个

c=null;

c=counter();

console.log(funs[0]());

reset里面的n=0和getUnique里面的n++都没有定义n,使用的都是同一个父级counter里面的n

function clusure(){

var arr=[];

for(var i=0;i<3;i++){ //i最后一次值是3，父级里存的是3

arr[i]=function(){return i;};

}

return arr;

}

var funs=clusure();

console.log(funs[0]()); //3 为何结果是这个？

console.log(funs[1]()); //3 为何结果是这个？

console.log(funs[2]()); //3 为何结果是这个？

实现汇率换算：

function change(){

var h1_d=5.7;

var h1_e=10;

function rbmToD(rmb){

return rmb/h1_d;

}

function rbmToE(rmb){

return rmb/h1_e;

}

return[rbmToD,rbmToE];

}

var funs=change();

console.log(funs[0](100));

console.log(funs[1](100));

自定义对象

面向过程：以任务的执行步骤为编程顺序

方法：封装并重用复杂任务的方式

问题：功能和功能操作的数据，分离

面向对象：在设计过程中，一切以描述一个对象为基本原则。

什么是对象：封装现实中一个事物的属性和功能的结构

对象中包含：属性和功能（在程序中功能就是方法）！

js中的对象：其实就是关联数组！

关联数组写法：使用key:value对，每个key之间用逗号分隔,属性名本身就是字符串

var fbb={

"姓名":"武则天",

"数学":90,

"语文":65,

"英语":91,

};

console.log("姓名："+fbb["姓名"]);

console.log("姓名："+fbb.姓名); //两种方法结果一样

fbb["姓名"]和fbb.姓名两种方式都可以，但是第一种方式里面要加引号的，以后推荐使用第二种方式。

js中内置对象其实有11个：

包装类型：String、Boolean、Number

所有对象的父类型：Object、Function

工具类型：Array、Date、RegExp、Math

错误类型：Error（EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError）

全局类型：Global(或者叫window)

宿主对象：由浏览器厂家自定义提供实现

分为两类：BOM对象、 DOM对象

js中创建自定义对象方式：

1.对象直接量方式:将属性名和属性值直接写出来的方式，也就是关联数组。属性名必须是字符串，但是属性名的引号可加可不加，一般不加引号的，但是要知道它是字符串。如果要在属性名中间加空格之类的，要加引号的。

在js中凡是见到大括号{}，就是对象！

2.new Object方式：其实就是使用父类型Object创建对象。相当于创建一个空数组。如：

var wzt=new Object(); //相当于创建一个空数组var wzt={};

wzt.姓名="武则天"; //也可以使用wzt["姓名"]="武则天";但是不推荐按这种方式

wzt.数学=90;

console.log("姓名："+wzt.姓名);

console.log("数学成绩："+wzt.数学);

3. function对象模板

关联数组的length属性是失效的！！

遍历对象：

var fbb={

"姓名":"武则天",

"数学":90,

"语文":65,

"英语":91

};

function getProperties(obj){

for(var key in obj){

console.log(key+":"+obj[key]);

}

getProperties(fbb);

console.log(fbb.husband); //访问一个不存在的属性是不会出错的，返回的是undefined

if("husband" in fbb){

console.log(fbb.husband);

}else{

console.log("未婚");

}

如何检测对象中是否存在指定属性：

1.使用in关键字：console.log('ename' in emp1);

2.使用对象的hasOwnProperty()方法：console.log(emp1.hasOwnProperty('ename'));

3.使用undefined判断：console.log(emp1.ename===undefined);

4.在条件语句中直接判断：if(emp1.ename){console.log('ename属性存在');}

例：

方法1：

if("husband" in fbb){

console.log(fbb.husband);

}else{

console.log("未婚");

}

方法2：这种方法最常用，可以判断任意对象的属性是否存在。

if(fbb.hasOwnProperty("husband")){

console.log(fbb.husband);

}else{

console.log("未婚");

}

方法3：

if(fbb.husband!==undefined){

console.log(fbb.husband);

}else{

console.log("未婚");

}

方法4：这种做法分不清null和undefined，如果将设置husband:null;或者0等时，会返回“未婚”。判断内置对象的属性或方法时，用这种方法，通常用它判断浏览器兼容性

if(fbb.husband){

console.log(fbb.husband);

}else{

console.log("未婚");

}

在访问那些极有可能不存在的属性时，要先判断再使用。

创建自定义对象：3种

1.直接量：var obj={属性名：属性值,...}

访问属性？obj.属性名

可能不存在的属性，使用之前必须先判断存在，再使用：

判断任意对象是否包含属性：var boolean=obj.hasOwnProperty("属性名")

如果包含返回true，否则返回false

判断内置对象，浏览器对象兼容性：if（obj.属性名）--》

undefined,null,0,"",NaN都是false，其余都是true

自定义对象创建的依据？需求中的名词！就是软件要保存的数据。

需求中的动词：对象

的功能/方法

对象的属性？表，证，单，据

对象中的方法：其实指的就是对象中的功能。

如何定义：var obj={

方法名:function(){方法体}

}

方法其实就是一个对象。对象中的方法本质上就是一个特殊的属性。对象中的

方法是操作数据的功能。

对象自己的方法，如何访问自己的属性：this指代当前对象。

什么是this？是js栈中一个固定的指针，永远指向当前正在操作的对象。

//创建hmm对象，有姓名，年龄属性，还包含自我介绍功能

var hmm={

name:"Han Meimei",

age:18;

intr:function(){ //一个对象中的方法就是一个特殊的属性

//自我介绍

var str="my name is "+this.name+". I'm "+this.age+" years old";

}

};

hmm.intr(); //this指针指向hmm

操作任何元素之前，先找到他：document.getElementById();

例：

var calc={

n:undefined,

m:undefined,

add:function(){

return this.n+this.m;

minus:function(){

return this.n-this.m;

}

calc.n=parseInt(prompt("第一个数"));

calc.m=parseInt(prompt("第二个数"));

</script>

面向对象的三大特点：封装、继承、多态

封装：将数据和对数据的操作，包装为一个整体，过程就叫做封装。

继承：使用现有类型，创建出新的类型。新类型中可以使用现有类型的属性和

功能！并且新类型可以扩展出现有类型没有的属性和功能。

所有对象的父类型，Object:toString()

hasOwnProperty()

都可以被使用

对象模板：又叫构造函数。专门从来反复创建相同结构的对象的专门方法。

如何定义构造函数：function 类型名(属性值参数...){

this.属性名=属性值；

......

this.方法名=function(){

方法体;

}

new 构造函数():

new:开空间

构造函数：划分空间结构，并且初始化内部属性的值

例：

function Student(name,age){

this.name=name;

this.age=age;

this.intr=function(){

console.log("my name is "+this.name+" I'm "+this.age+" years old");

}

this.toString=function(){

return "[name:"+this.name+",age:"+this.age+"]";

}

var lilei=new Student("Li Lei",19); //new是创建一个obj,Student("Li

Lei",19)调用构建函数

var hmm=new Student("Han Meimei",18);

lilei.intr();

hmm.intr();

重写方法：如果子类型认为父类型的方法不好用，可以重新定义和父类型完全

同名的方法，实现覆盖！

console.log(lilei.toString()); //得到的值都是object

console.log(hmm.toString()); //得到的值都是object

默认toString方法如果无法打印内容，默认打印的是对象类型。

一般自定义类型对象，都会重写toString方法。

this.toString=function(){

return "[name:"+this.name+",age:"+this.age+"]";

}

toString方法利用for in来更加灵活的实现：

this.toString=function(){

var str="";

for(var key in this){

if(typeof(this[key]!="function"){

str+=key+":"+this[key]+",";

}

return str;

}

整个案例综合如下：

function Student(name,age){

this.name=name; //分配给将来的对象的

this.age=age;

this.intr=function(){

console.log("my name is "+this.name+" I'm "+this.age+" years old");

}

this.toString=function(){

var str="";

for(var key in this){

if(typeof(this[key])!="function"){

str+=key+":"+this[key]+",";

}

return str;

}

var lilei=new Student("Li Lei",19);

var hmm=new Student("Han Meimei",18);

lilei.intr();

hmm.intr();

console.log(lilei.toString()); //得到的值都是object

console.log(hmm.toString());

hmm.birth="1990-05-30";

console.log(hmm.birth); // 1990-05-30

console.log(lilei.birth); //undefined

hmm.count=10;

lilei.count=10;

hmm.count--;

lilei.count--;

console.log(hmm.count); //9

console.log(lilei.count); //9

原型与继承：

原型：在JavaScript中，函数本身也是一个包含了方法和属性的对象。原型是

已经存在的

原型prototype：所有方法都有原型。构造函数背后，专门保存由方法创建出

的对象共有的数据。任何对象无权修改原型中的数据。

自有属性：只给一个对象定义的属性，仅属于当前对象。其他对象不能共享。

如：

hmm.birth="1990-05-30";

console.log(hmm.birth); // 1990-05-30

console.log(lilei.birth); //undefined

定义共有属性：

Student.prototype.count=10;

/*lilei.count--; //任何对象无权修改原型中的数据，如果赋值，会自动

为*/对象创建同名自有属性

Student.prototype.count--;

console.log(lilei.count);

console.log(hmm.count);

Student.prototype.count=10;

lilei.count--;

Student.prototype.count--;

console.log(lilei.count); //取自己本身的值，8 只要自己已经有的，

就不会从原型中取值

console.log(hmm.count); //取原型的值，9

共有属性：保存在原型中，由所有同类型对象共享的属性。

设置/读取：构造函数.prototype.共有属性名

不管是否创建了一个函数，只要有方法，就有原型

删除属性定义：delete方法，即可以删除自有属性，也可以删除共有属性。

语法：delete 对象[.prototype].属性; -->中括号里面可有可无

hasOwnProperty:仅检测当前对象的自有属性！

属性 in 对象：不但检测当前对象的自有属性，而且同时检测当前对象原型的

共有属性！

收录于

手把手教你配置UEFI Secure Boot：从密钥生成到系统验证（附避坑指南）本文详细介绍了如何配置UEFI Secure Boot，从密钥生成到系统验证的全过程，包括PK、KEK等关键密钥的生成方法，以及常见问题的解决方案。通过实战案例和避坑指南，帮助用户有效提升系统启动安全性，防止恶意软件植入。阅读详情

JavaScript基础知识（10）

相关推荐