JavaScript学习笔记——创建对象与原型

对象字面量

对象的字面量就是一个{}。里面的属性和方法均是键值对

var teacher = { name : "老王", age : "24", like : function(){ console.log(this.name + "," + this.age + "岁"); } }

工厂模式

通过该方法可以大批量的创建对象

function createTeacher(name,age,gender){ //创建一个对象 var obj = new Object(); //向对象中添加属性 obj.name = name; obj.age = age; obj.gender = gender; obj.sayName = function(){ console.log(this.name); } return obj; } var teacher1 = createTeacher("老王",24,"男"); var teacher2 = createTeacher("老李",25,"女"); var teacher3 = createTeacher("老陈",26,"男"); console.log(teacher1); console.log(teacher2); console.log(teacher3);

弊端：

使用工厂方法创建的对象，使用的构造函数都是Object 所以创建的对象都是Object这个类型，就导致我们无法区分出多种不同类型的对象

利用构造函数

function createTeacher(name,age,gender){ //this指的是构造函数中的对象实例 this.name = name; this.age = age; this.gender = gender; this.sayName = function(){ console.log(this.name); } } var teacher1 = new createTeacher("老王",24,"男"); var teacher2 = new createTeacher("老李",25,"女"); console.log(teacher1); console.log(teacher2);

Class创建对象

es6新出的规范，允许使用class创建对象

class createTeacher{ //定义构造函数 constructor(name,age,gender){ this.name = name; this.age = age; this.gender = gender; this.sayName = function(){ console.log(this.name + "," + this.age); } } } var teacher1 = new createTeacher("老王",24,"男"); console.log(teacher1);

和构造函数几乎没有区别

原型对象

我们所创建的每一个函数，解析器都会向函数中添加一个属性 prototype。这个属性对应着一个对象，这个对象就是我们所谓的原型对象。

如果函数作为普通函数调用prototype没有任何作用，当函数以构造函数的形式调用时，它所创建的实例对象中都会有一个隐含的属性，指向该构造函数的原型，我们可以通过proto来访问该属性

// 定义构造函数 function Person() {} ​ var per1 = new Person(); var per2 = new Person(); ​ console.log(Person.prototype); // 打印结果：[object object] ​ console.log(per1.__proto__ == Person.prototype); // 打印结果：true //实例.__proto__ 和 构造函数.prototype都指的是原型对象

原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。

以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样就不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了

使用 in 检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true。

可以使用对象的 hasOwnProperty() 来检查对象自身中是否含有该属性

//构造函数 function Teacher(name,age,gender){ //this指的是构造函数中的对象实例 this.name = name; this.age = age; this.gender = gender; } //有一些共用的方法进行封装，封装到原型中 var teacherProto = { sayName:function(){ console.log(this.name + "," + this.age + "岁"); }, teach:function(){ console.log(this.name + "教书育人"); } } //添加原型 Teacher.prototype = teacherProto; var teacher1 = new Teacher("老王",24,"男"); var teacher2 = new Teacher("老李",25,"女"); console.log(teacher1); console.log(teacher2);

从上图可以看出原型的方法地址相同

class添加原型

class createTeacher{ //定义构造函数 constructor(name,age,gender){ this.name = name; this.age = age; this.gender = gender; } sayName(){ console.log(this.name + "," + this.age); } } var teacher1 = new createTeacher("老王",24,"男"); var teacher2 = new createTeacher("老李",25,"女"); console.log(teacher1); console.log(teacher2);

下图可以看出原型地址是一样的

原型链

原型对象也是对象，所以它也有原型，当我们使用或访问一个对象的属性或方法时

它会先在对象自身中寻找，如果有则直接使用如果没有则会去原型对象中寻找，如果找到则直接使用如果没有则去原型的原型中寻找，直到找到Object对象的原型Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回 null

完整构造函数创建对象的方式

创建构造函数创建原型对象设置构造函数原型对象属性protoType

构造函数和普通函数的区别

构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写

构造函数和普通函数的区别就是调用方式的不同：普通函数是直接调用，而构造函数需要使用new关键字来调用

this的指向也有所不同：

以函数的形式调用时，this永远都是window。比如fun();相当于window.fun()以方法的形式调用时，this是调用方法的那个对象以构造函数的形式调用时，this是新创建的那个对象

new 一个构造函数的执行流程

开辟内存空间，存储新创建的对象将新建的对象设置为构造函数中的this，在构造函数中可以使用this来引用新建的对象执行函数中的代码（包括设置对象属性和方法等）将新建的对象作为返回值返回

类、实例

使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类

通过一个构造函数创建的对象，称为该类的实例

instanceof

使用 instanceof 可以检查一个对象是否为一个类的实例

对象 instanceof 构造函数

如果是，则返回true；否则返回false

补充： 所有的对象都是Object的后代，因此 任何对象 instanceof Object 的返回结果都是true