目录前言创建对象方式二读取对象枚举变量属性区分变量和属性函数和方法this初印象创建对象方式三创建对象方式四注意三个特点构造函数new关键字的执行流程构造函数的弊端对象的实例化instanceof原型对象原型对象的作用检查对象中是否含有某个属性创建对象方式五垃圾回收GC)前言在上一节对象初相识我们学习了使用new Object来创建对象这是第一种创建方式适用场景不太清楚后期添加什么属性和方法接下来我们将学习其他四种创建方式其中几种是我们后期更加常用且方便的。创建对象方式二利用字面量创建对象var obj {}//创建一个空对象 new Object() var obj2 { name: 猪八戒, age: 28, gender: 男, sayHi: function () { console.log(方法写法二匿名函数); }, say() { console.log(方法写法五es6简写方法); }, };适用场景对象创建时就知道有什么属性和方法注意对象内的属性或者方法我们采取键值对的形式键:值属性名属性值多个属性或者方法中间用逗号隔开最后一个属性或者方法逗号可以省略读取对象调用对象的属性 对象名.属性名对象名[属性名]调用对象的方法 对象名.方法名//读取对象属性 console.log(obj2.name); console.log(obj2[age]); //读取对象方法 obj.sayHi()枚举变量属性使用for...in语句语法for(var 变量 in 对象){}作用对象中有几个属性循环体就会执行几次每次执行时会将对象中的一个属性的名字赋值给变量var obj { name: 孙悟空, age: 18, gender: 男, address: 花果山, say() { console.log(老孙来也); }, }; for (let k in obj) { console.log(obj[k]);//通过变量k读取属性值 []读取变量 } obj.say();区分变量和属性函数和方法变量和属性都是用来存储数据的变量是单独声明并赋值使用的时候直接写变量名是单独存在的属性在对象中不需要使声明使用时也是对象.属性依托对象存在的函数和方法都是用来实现某种功能的可以做某件事但函数是单独存在的方法是依托对象存在的this初印象解析器在调用函数每次都会向函数内部传递一个隐含的参数这个隐含的参数就是this,this是参数浏览器传输的直接拿来用的this指向的是一个对象这个对象我们称为函数执行的上下文对象。根据函数的调用方式的不同this会指向不同的对象:1:当以函数的形式直接调用时this是window2:当以方法的形式调用时 谁调用方法,this就是谁3:当以构建函数的形式调用时this就是新创建的那个对象this就是当前对象我们找的this就是当前作用域取值范围后面讲到构造函数时用到的创建对象方式三使用工厂方法创建对象通过该方法可以大批量的创建对象function createPer(name, age) { let per { //new Object() name: name,//name age, say() {//new Function(),开辟了一个新的空间用来放say函数 console.log(hello); }, }; return per; //返回创建的对象让函数外部拿到结果 } // 函数外部拿到结果 let per1 createPer(jack, 18); //在控制台输出 // console.log(per1); let per2 createPer(tom, 19); //页面写入 // document.writeln(per2); let per3 createPer(dana, 20); //弹出 let per4createPer(来福,2) // alert(per3); console.log(per1); console.log(per2); console.log(per3); console.log(per4);问题使用工厂方法创建的对象使用的构造函数都是Object所以创建的对象都是Object这个类型就导致我们无法区分多种不同类型的对象创建对象方式四利用构造函数来创建对象构造函数是一种特殊的函数主要用来初始化对象即为对象成员变量赋值初始值它综合new运算符一起使用。我们可以把对象中一些公共属性和方法抽取出来然后封装到这个函数里面构造函数语法规范function 构造函数名(){ this.属性值 this.方法function(){} } new 构造函数名();function Person(name, age, gender) { //alert(this);//this就是新建的对象然后赋值给per this.name name; this.age age; this.gender gender; this.sayName function () { alert(this.name) }; } var per new Person(孙悟空, 18, 男); var per2 new Person(玉兔精, 16, 女); var per3 new Person(沙和尚, 28, 男); console.log(per); console.log(per2); console.log(per3);注意三个特点构造函数就是一个普通的函数创建方式和普通函数没有区别不同的是构造函数习惯上首字母大写构造函数和普通函数的区别就是调用方式的不同 普通函数是直接调用构造函数需要使用new关键字来调用构造函数创建属性和方法必须结合this使用此时的this就是新创建的那个对象构造函数new关键字的执行流程a:立刻创建一个新的对象b:将新建的对象设置为函数中this在构造函数中可以使用this来引用新建的对象c:逐行执行函数中的代码d:将新建的对象作为返回值返回new一个对象时会在堆中开辟一片区域new Person()会在堆中开辟一块区域构造函数的弊端将函数定义在全局作用域污染了全局作用域的命名空间而且定义在全局作用域中也很不安全优化方法是在构造函数内部创建也就是构造函数每执行一次就会创建一个新的sayName方法但所有实例的sayName都是唯一的这样就导致了构造函数执行一次就会创建一个新的方法执行一万次就会创建一万个新的方法而这一万个对象都是一样的这是没有必要的完全可以使所有的对象共享同一个方法对象的实例化使用同一个构造函数创建的对象我们称为一类对象也将一个构造函数称为一个类例如明星汽车设计图纸我们将通过一个构造函数创建的对象称为该类的实例例如刘德华、某一辆宝马车我们利用构造函数创建对象的过程我们也称为对象的实例化instanceof使用instanceof可以检查一个对象是否是一个类的实例语法对象 instanceof 构造函数如果是则返回true否则返回false所有的对象都是Object的后代所以任何的对象和我们的instanceof 检查时都是true原型对象我们所创建的每一个函数解析器都会向函数中添加一个属性prototype,这个属性对应着一个对象这个对象就是我们所谓的原型对象(prototype是属性名它的值是一个对象这个对象叫原型对象),默认情况下它是一个空对象如果我们的函数作为普通函数调用prototype没有任何作用原型对象的作用原型对象就相当于一个公共的区域所有同一个类的实例都可以访问到这个原型对象我们可以将对象中共有的内容统一设置到原型对象中当我们访问对象的一个属性或方法时它会先在对象自身中寻找如果有就直接使用如果没有就去原型对象中寻找然后使用。以后我们创建构造函数时可以将这些对象共有的属性和方法统一添加到构造函数中这样就不用分别给每一个对象添加也不会影响到全局作用域就可以使每个对象都具有这样的属性和方法了/* 需求创建一个Person类在原型对象上添加属性a以及添加一个sayHello方法 */ function Person(name, age) { this.name name; this.age age; } Person.prototype.a 1; // 此时这个sayHello方法就没有放在全局了而是放在Person构造函数的原型对象上 Person.prototype.sayHello function () { console.log(hello); }; // 实例对象都可以使用构造函数原型对象上的属性和方法 let per1 new Person(jack, 18); let per2 new Person(jack, 18); console.log(per1.a); per1.sayHello();检查对象中是否含有某个属性in检查某个属性是否属于某个对象时先在自身找找不到则会往这个对象的类的原型对象上找找到也会返回true 这样就会导致有歧义可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性,使用该方法只有当对象自身中含有属性时才会返回true创建对象方式五JavaScript 语言中生成实例对象的传统方法是通过构造函数ES6 提供了更接近传统语言的写法引入了 Class类这个概念作为对象的模板。通过class关键字可以定义类。最好用的方式// es6实现 class方法实现 class PersonN { //构造方法 constructor名字不能修改 // 当我们new实例对象的时候这个方法自动执行 constructor(username, password) { this.username username; this.password password; } //方法必须使用该语法, 不能使用 ES5 的对象完整形式 getstr() { console.log(用户名 this.username 密码 this.password); } //ES5 的对象完整形式 报错 // getstr:function () {} } const pn1 new PersonN(123456, 789012); pn1.getstr();说明使用class关键词 声明类constructor为构造方法constructor()方法可以接收参数更新类的静态属性如果没有显式定义一个空的constructor()方法会被默认添加this关键字则代表实例对象getstr()为普通方法不要用es5完整写法getstr()存在 prototype上。pn1.constructor pn1.prototype.constructor // true垃圾回收GC)就像人生活时间长了会产生垃圾一样程序运行过程中也会产生一些垃圾这些垃圾积攒过多以后会导致程序运行的速度过慢所以我们需要一个垃圾回收的机制来处理程序运行过程中产生的垃圾当一个对象没有任何的变量或者属性对它进行引用此时我们将永远无法操作该对象此时这种对象就是一个垃圾这种对象过多会占用我们大量的内存空间导致我们程序运行变慢这种垃圾我们必须清理在JS中拥有自动的垃圾回收机制会自动将这些垃圾对象从内存中销毁我们不需要也不能进行垃圾回收我们需要做的只是将不再使用的对象设置null即可var objnew Object(); //对对象进行各种操作 obj.prototype123; console.log(obj.prototype) objnull;