2023学年完整公开课版JS对象进阶

《物联网Web前端开发基础》课程

JS对象进阶【任务8-3】JavaScript构造函数需求分析构造函数是JavaScript创建对象的另外一种方式。相对于字面量“{}”的方式，构造函数可以创建出一些具有相同特征的对象。“水果”构造函数

苹果、香蕉、橘子创建对象【任务8-3】JavaScript构造函数知识储备——构造函数的基本语法构造函数主要用来创建对象，并为对象的成员赋初始值。function构造函数名(){//函数体}【任务8-3】JavaScript构造函数知识储备——构造函数的基本语法构造函数名称推荐首字母大写。如：Person、Apple、Student【任务8-3】JavaScript构造函数知识储备——构造函数的基本语法使用构造函数创建对象的语法：在小括号中可以传递参数给构造函数。如果没有参数，小括号可以省略。varobj=new构造函数名();【任务8-3】JavaScript构造函数知识储备——构造函数的基本语法在构造函数中，使用this表示新创建出来的对象，通过this来为新创建出来的对象添加属性或方法。function构造函数名(){this.属性=属性;this.方法=function(){//方法体

};}【任务8-3】JavaScript构造函数知识储备——构造函数的基本语法利用构造函数可以很方便地创建同一类对象，在创建时，只需将不同对象的属性值通过参数传进去即可。【任务8-3】JavaScript构造函数知识储备——构造函数的基本语法JavaScript中的构造函数类似于传统面向对象语言（如Java）中的类（class）。在JavaScript中也可以使用面向对象编程中的一些术语。【任务8-3】JavaScript构造函数知识储备——构造函数的基本语法抽象：将一类对象的共同特征提取出来，编写成一个构造函数（类）的过程。实例化：利用构造函数（类）创建对象的过程。实例：如果p1对象是由Person构造函数创建出来的，则p1对象称为Person构造函数

的实例（或称为实例对象）。【任务8-3】JavaScript构造函数知识储备——静态成员和实例成员在面向对象中有静态成员和实例成员的概念。实例成员：实例对象的成员。静态成员：通过类或构造函数访问的成员，不需要创建实例对象就能访问。【任务8-3】JavaScript构造函数知识储备——静态成员和实例成员functionPerson(uname){this.uname=uname;}Person.school='X大学'; //添加静态属性schoolPerson.sayHello=function(){ //添加静态方法sayHelloconsole.log('Hello');};console.log(Person.school); //访问静态属性，输出结果：X大学Person.sayHello(); //访问静态方法，输出结果：Hello【任务8-3】JavaScript构造函数知识储备——静态成员和实例成员在静态方法中不能使用this访问实例对象，在静态方法中如果使用this，访问到的是构造函数本身。【任务8-3】JavaScript构造函数知识储备——值类型和引用类型基本数据类型（如字符串型、数字型、布尔型、undefined、null）又称为值类型，复杂数据类型（对象）又称为引用类型。【任务8-3】JavaScript构造函数知识储备——值类型和引用类型引用类型的特点是，变量中保存的仅仅是一个引用的地址。//创建一个对象，并通过变量obj1保存对象的引用varobj1={name:'小明',age:18};//此时并没有复制对象，而是obj2和obj1两个变量引用了同一个对象varobj2=obj1;//比较两个变量是否引用同一个对象console.log(obj2===obj1); //输出结果：true//通过obj2修改对象的属性='小红';//通过obj1访问对象的name属性console.log(); //输出结果：小红【任务8-3】JavaScript构造函数知识储备——值类型和引用类型当对变量进行赋值时，并不是将对象复制了一份，而是将两个变量指向了同一个对象的引用。【任务8-3】JavaScript构造函数知识储备——值类型和引用类型如果给其中一个变量obj1重新赋值为其他对象，或者重新赋值为其他值，则obj1将不再引用原来的对象，但obj2仍然在引用原来的对象。varobj1={name:'小明',age:18};varobj2=obj1;//obj1指向了一个新创建的对象obj1={name:'小红',age:17};//obj2仍然指向原来的对象console.log(); //输出结果：小明【任务8-3】JavaScript构造函数知识储备——值类型和引用类型当一个对象只被一个变量引用的时候，如果这个变量又被重新赋值，则该对象就会变成没有任何变量引用的情况，这时候就会由JavaScript的垃圾回收机制自动释放。【任务8-3】JavaScript构造函数知识储备——值类型和引用类型当引用类型的变量作为函数的参数来传递时，其效果和变量之间的赋值类似。functionchange(obj){='小红'; //在函数内修改了对象的属性}varstu={name:'小明',age:18};change(stu);console.log(); //输出结果：小红【任务8-3】JavaScript构造函数知识储备——原型对象在JavaScript中，每个构造函数都有一个原型对象存在，这个原型对象通过构造函数的prototype属性来访问。functionPerson(){} //定义函数console.log(Ptotype); //输出结果：{constructor:ƒ}console.log(typeofPtotype); //输出结果：object【任务8-3】JavaScript构造函数知识储备——原型对象利用原型对象，可以实现为所有的实例对象共享实例方法。原型对象其实就是所有实例对象的原型。【任务8-3】JavaScript构造函数知识储备——原型对象functionPerson(uname){this.uname=uname;}Ptotype.sayHello=function(){console.log('你好，我叫'+this.uname);};varp1=newPerson('张三');varp2=newPerson('李四');console.log(p1.sayHello===p2.sayHello); //输出结果：truep1.sayHello(); //输出结果：你好，我叫张三p2.sayHello(); //输出结果：你好，我叫李四【任务8-3】JavaScript构造函数知识储备——this关键字函数内的this指向通常与以下3种情况有关。①构造函数内部的this指向新创建的对象，前面讲过了。②直接通过函数名调用函数时，this指向的是全局对象window。③如果将函数作为对象的方法调用，this将会指向该对象。【任务8-3】JavaScript构造函数知识储备——this关键字functionfoo(){returnthis;}varo={name:'Jim',func:foo};console.log(foo()===window); //对应第2种情况，输出结果：trueconsole.log(o.func()===o); //对应第3种情况，输出结果：true【任务8-3】JavaScript构造函数知识储备——更改this指向JavaScript提供两种方式手动更改this的指向：apply()

call()functionmethod(){console.log();}method.apply({name:'张三'}); //输出结果：张三method.call({name:'李四'}); //输出结果：李四【任务8-3】JavaScript构造函数知识储备——更改this指向apply()第2个参数表示调用函数时传入的参数，通过数组的形式传递；call()使用第2~N个参数来表示调用函数时传入的参数。functionmethod(a,b){console.log(a+b);}method.apply({},['1','2']); //数组方式传参，输出结果：12method.call({},'3','4'); //参数方式传参，输出结果：34【任务8-3】JavaScript构造函数知识拓展——遍历对象的属性和方法使用for…in语法可以遍历对象中的所有属性和方法。//准备一个待遍历的对象varobj={name:'小明',age:18,sex:'男'};//遍历obj对象for(varkinobj){//通过k可以获取遍历过程中的属性名或方法名console.log(k); //依次输出：name、age、sexconsole.log(obj[k]); //依次输出：小明、18、男}【任务8-3】JavaScript构造函数知识拓展——判断对象成员是否存在使用in运算符判断一个对象中的某个成员是否存在。