创建对象的方案
1.字面量方式
//使用字面量的方式创建三个对象
var p1 = {
name: "小名",
age: 30,
sex: "male",
running: function () {
console.log(this.name + "is running!");
},
};
var p2 = {
name: "小红",
age: 25,
sex: "female",
running: function () {
console.log(this.name + "is running!");
},
};
var p3 = {
name: "小丽",
age: 30,
sex: "female",
running: function () {
console.log(this.name + "is running!");
},
};
console.log(p1)
console.log(p2)
console.log(p3)
image.png
缺点：
- 1.做了很多重复工作
- 2.这样创建的对象没有标出所属的类别
- 3.每创建一个对象，都需要在堆内存中开辟一块新内存，存储创建的running函数对象,如果创建100个对象，就创建了100running函数，就需要100个这样的堆内存来存储100个这样的running函数对象
2.工厂模式
//使用工厂模式创建对象
function createPerson(name, age, sex) {
var p = {};
p.name = name;
p.age = age;
p.sex = sex;
p.running = function () {
console.log(this.name + "is running!");
};
return p;
}
var p1 = createPerson("小名", 30, "male");
var p2 = createPerson("小红", 25, "female");
var p3 = createPerson("小丽", 30, "female");
console.log(p1);
console.log(p2);
console.log(p3);
image.png
缺点：
- 这样创建的对象没有标出所属的类别
- 每创建一个对象，都需要在堆内存中开辟一块新内存，存储创建的running函数对象,如果创建100个对象，就创建了100running函数，就需要100个这样的堆内存来存储100个这样的running函数对象
3.构造函数
3.1.什么是构造函数
当一个函数被new操作符调用的时候，这个函数就是构造函数
new操作符调用的作用
- 1.在内存中创建一个新的对象（空对象）
- 2.这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性的值
- 3.构造函数内部的this，会指向创建出来的新对象
- 4.执行构造函数内部的代码（函数体代码）
- 5.如果构造函数没有返回非空对象，则返回创建出来的这个新对象
function person() {}
const p = new person();
console.log(p);
image.png
可以看到：通过构造函数创建出来的对象，有标注出来这个对象所属的类的类名person的
说明，构造函数的调用创建出了一个有标明所属类的类名的对象；那我们使用构造函数去创建对象，不就解决了创建出的带向没有标注出所属类的类名的问题？
补充：
function person() {}
//1.当构造函数创建对象的时候，不需要传参，可以省略小括号
const p1 = new person;
console.log(p1)
//2.获取构造函数创建出来的对象所属类的类名
console.log(p1.__proto__.constructor.name;
//3.为了区分构造函数和普通函数的区别，一般情况下，构造函数的名字会大写
function Fish() {}
const fish = new Fish();
image.png
3.2使用构造函数创建对象
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.running = function () {
console.log(this.name + "is running!");
};
}
var p1 = new Person("小名", 30, "male");
var p2 = new Person("小红", 25, "female");
var p3 = new Person("小丽", 30, "female");
console.log(p1);
console.log(p2);
console.log(p3);
image.png
优点：
- 通过构造函数创建出的对象，有标注出所属类的类名
缺点：
- 每创建一个对象，都需要在堆内存中开辟一块新内存，存储创建的running函数对象
- 如果创建100个对象，就创建了100running函数，就需要100个这样的堆内存来存储100个这样的running函数对象，浪费内存
4.构造函数和原型相结合
4.1对象的原型理解
每个对象都有一个特殊的内置属性[[prototype]],指向一个对象，这个对象叫做对象的原型，
- 为了和函数的原型做区分，我们一般称之为
隐式原型对象
早起的ECMA是没有规范如何去查看内置属性[[prototype]]这个原型对象的
- 1.浏览器给对象提供了一个属性
__proto__，可以通过此属性去查看对象的原型对象 - 2.ES5提供了一个方法
Object.getPrototype(obj),去查看目标对象的原型对象
var obj = { name: "why" };
console.log(obj.__proto__); //[Object: null prototype] {}
console.log(Object.getPrototypeOf(obj)); //[Object: null prototype] {}
console.log(obj.__proto__ === Object.getPrototypeOf(obj)); //true
image.png
可以看到通过__proto__和Object.getPrototype(obj)获取到的同一个对象的原型对象，也是同一个对象
原型的用处
当我们从一个对象中获取一个属性的时候，它会触发[[get]]操作：
- 1.在当前对象obj中查找此属性，如果找到，就返回对应的值
- 2.如果没有找到，会去此对象的原型对象
obj.__proto__上查找此属性，如果找到，就返回对应的值 - 3.如果没有找到，继续去原型对象的原型对象
obj.__proto__.__proto__上查找此属性，如果找到，就返回对应的值 - ....
- 4.直到找到
Object.prototype为止，,此时Object.prototype.__proto__为null,则停止查找，返回undefined
var obj = { name: "why" };
obj.__proto__.age = 18;
console.log(obj.age); //18 虽然obj对象上没有age属性，但是在obj.__proto__对象上找到了age属性，就返回其值18
4.2函数的原型理解
函数作为一个对象而言，它也是有内置属性[[prototype]]这个隐式原型对象的
作为函数，函数还有一个属性prototype，指向一个对象，我们一般称之为显式原型对象
函数作为构造函数，被new调用的时候，会把内部创建的
新的对象的[[prototype]]隐式原型对象指向构造函数的prototype显示原型对象
function foo() {}
console.log(foo.__proto__); //{}
console.log(foo.prototype); //{}
//函数作为构造函数，被new调用的时候，
//会把内部创建的新的对象的[[prototype]]隐式原型对象指向构造函数的prototype显示原型对象
const f = new foo();
console.log(f.__proto__); //{}
console.log(foo.prototype); //{}
console.log(f.__proto__ === foo.prototype); //true
image.png
image.png
4.3函数的原型对象prototype上的constructor
4.3.1.查看函数原型对象上有哪些属性
function foo() {}
console.log(foo.prototype); //{}
console.log(Object.getOwnPropertyDescriptors(foo.prototype));
image.png
说明，函数原型对象上有一个属性constructor,并且constructor属性是不可枚举的
function foo() {}
console.log(foo.prototype.constructor === foo); //true 函数原型对象上的constructor属性指向函数本身
//获取函数原型对象上的constructor函数的名字
console.log(foo.prototype.constructor.name); //foo 函数的名字可以通过访问函数的name属性获取
说明：函数原型对象上的constructor属性指向函数本身
4.4改变函数的prototype的指向
获取一个对象的属性，其实实在进行[[get]]操作：
先在当前对象上寻找属性，找到就返回对应的值；找不到就去对象的隐式原型对象[[prototype]]对象上找
对象的隐式原型对象[[prototype]]指向其构造函数的prototype对象
foo.prototype.name = "why";
foo.prototype.age = 18;
var f = new foo();
console.log(f.name, f.age); //"why" 18
如果需要在函数的原型对象上添加很多属性，一个一个添加太麻烦，可以通过改变函数prototype指向到一个新对象的方式添加
//可以直接改变函数的prototype的指向，指向一个新对象
foo.prototype = {
name: 'why',
age: 18
}
Object.defineProperty(foo.prototype, "constructor", {
configurable: true,
enumerable: false,
writable: true,
value: foo
})
console.log(foo.prototype)
console.log(Object.getOwnPropertyDescriptors(foo.prototype));
image.png
4.5使用构造函数和原型相结合创建对象
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
Person.prototype.running = function () {
console.log(this.name + "is running!");
};
var p1 = new Person("小名", 30, "male");
var p2 = new Person("小红", 25, "female");
var p3 = new Person("小丽", 30, "female");
console.log(p1);
console.log(p2);
console.log(p3);
//当前对象上没有running方法，会去对象的[[prototype]]隐式原型对象上去找，
//而对象的隐式原型对象正是创建对象的构造函数的prototype显示原型对象
p1.running()
p2.running()
p3.running()
image.png
优点：
- 通过构造函数创建出的对象，有标注出所属类的类名
- 如果创建100个对象，只会创建一个running函数，避免了内存浪费
非常感谢王红元老师的深入JavaScript高级语法让我学习到很多 JavaScript 的知识
