(作为当代大学生,标题就是要够骚才能骗点击嘛,轻点喷..)下面开始开车
在典型的OOP语言中(如java),都存在类的实例,类是对象的模板,对象就是类的实例,但是在ES6之前,JS并没有引入类的概念,在ES6之前,对象不是基于类创建的,而是用构造函数来定义对象。
1.构造函数
创建对象可以通过以下三种方式:
(1)利用new Object()
var obj1=new Object()
(2)利用对象字面量
var obj2={}
(3)利用构造函数Constructor
function Star(name,age){
this.name=name,
this.age=age,
this.play=function(){
console.log('我打球贼厉害')
}
var James=new Star('詹姆斯',37);
利用构造函数创建对象时,注意两点:
a.构造函数用于创建对象时,函数名首字母大写
b.构造函数要和new一起用才有意义
是不是看到这里觉得我废话有点多....那你知道new在执行的时候做了啥吗?
new在执行时会做四件事情:
1.在内存中创建一个空的对象
2.让this指向这个新的对象
3.执行构造函数里面的代码,给这个新对象添加属性和方法
4.返回这个新对象(所以构造函数里面不要return)
2.成员
静态成员:在构造函数上添加的成员,只能由构造函数本身来访问。
function Star(name,age){
this.name=name,
this.age=age,
this.play=function(){
console.log('我打球贼厉害')
}
Star.sex='男'
console.log(Star.sex)//男
console.log(James.sex)//undefined
实例成员:在构造函数内部创建(this添加)的对象的成员,只能由实例化对象来访问。
var James=new Star('詹姆斯',37);
这里的name,age,play就是实例成员
console.log(James.name) //詹姆斯
console.log(Star.name)//undefined
不可以通过构造函数来访问实例成员
2.构造函数原型prototype
构造函数通过原型分配的函数是所有对象共享的。
JavaScript规定,每一个构造函数都有一个prototype属性,指向另一个对象。注意这里的prototype就是一个对象,这个对象所有的属性和方法,都会被构造函数所拥有。
function Star(name,age){
this.name=name,
this.age=age,
this.play=function(){
console.log('我打球贼厉害')
}
console.dir(Star)
可以看到prototype是一个对象。那prototype有啥用呢?我们可以把那些不变的方法,直接定义在prototype原型上,这样所有对象的实例就可以共享这些方法,这样就可以避免内存浪费的问题,比如我再通过new Star()去实例一个新的对象,新的对象也会有paly方法,由于函数属于复杂数据类型,这样内存就又会开辟空间去存储这个函数,这样就会造成内存浪费。
3.对象原型__proto__
对象都会有一个__proto__属性,指向构造函数的prototype原型对象上,之所以对象可以使用构造函数的prototype原型对象上的属性和方法,就是因为有__proto__原型的存在。
function Star(name, age) {
this.name = name,
this.age = age,
this.play = function() {
console.log('我打球贼厉害')
}
}
var James = new Star('詹姆斯', 37);
console.log(James)
我们可以看到__proto__是一个对象,指向的是构造函数Star的原型对象。
console.log(James.__proto__==Star.prototype) //true
consloe.log(James.play) // f
方法的查找原则:
首先先看James这个对象身上是否有play方法,如果有就执行,如果没有,因为有__proto__的存在,就去构造函数原型对象prototype身上去查找play这个方法,有就执行。
这里我感觉他们就是三角恋的关系......
- __proto__对象原型和原型对象 prototype是等价的 proto
- 对象原型的意义就在于为对象的查找机制提供-个向,或者说一条路线,但是它是一个非标准属性, 因此实际开发中,不可以使用这个属性,它只是内部指向原型对象prototype
- 对象原型(proto) 和构造函数( prototype )原型对象里面都有一个属性 constructor属性, constructor 我们称为构造函数,因为它指回构造函数本身。 constructor主要用于记录该对象引|用于哪个构造函数,它可以让原型对象重新指向原来的构造函数。
构造函数、实例、原型对象三者之间的关系:
图上明显的看的出来是复杂的三角恋关系哈哈哈哈
4.原型链
function Star(name, age) {
this.name = name,
this.age = age,
this.play = function() {
console.log('我打球贼厉害')
}
}
var James = new Star('詹姆斯', 37);
console.log(Star.prototype.__proto__===Object.prototype) //true
console.log(Object.prototype.__proto__) //null
- Star原型对象里面的__ proto__ 原型指向的是Object . prototype
5. JavaScript的成员查找机制(规则)
①当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。
②如果没有就查找它的原型(也就是_ proto 指向的prototype原型对象)。
③如果还没有就查找原型对象的原型( Object的原型对象)。
④依此类推一直找到Object为止 ( null)。
6.原型对象的this指向
function Star(name, age) {
this.name = name,
this.age = age
}
Var that;
Star.prototype.play = function() {
console.log('我打球贼厉害')
that = this
}
var James = new Star('詹姆斯', 37);
console.log(that === James); //true
- 在构造函数中,里面this指向的是对象实例 James
- 原型对象函数里面的this指向的是实例对象 James
所以指向的都是实例对象!
补充(原型继承)
1. 方法一这种方法最常用,安全性也比较好。我们先定义两个对象
function Animal(name) {
this.name = name;
}
function Dog(age) {
this.age = age;
}
var dog = new Dog(2);
要构造继承很简单,将子对象的原型指向父对象的实例(注意是实例,不是对象)
Dog.prototype = new Animal("wangwang");
这时,dog就将有两个属性,name和age。而如果对dog使用instanceof操作符
console.log(dog instanceof Animal); // true
console.log(dog instanceof Dog); // false
这样就实现了继承,但是有个小问题
console.log(Dog.prototype.constructor === Animal); // true
console.log(Dog.prototype.constructor === Dog); // false
可以看到构造器指向的对象更改了,这样就不符合我们的目的了,我们无法判断我们new出来的实例属于谁。因此,我们可以加一一行代码
Dog.prototype.constructor = Dog;
console.log(dog instanceof Animal); // false
console.log(dog instanceof Dog); // true
这种方法是属于原型链的维护中的一环,下文将详细阐述。
2. 方法二这种方法有它的好处,也有它的弊端,但弊大于利。先看代码
function Animal(name) {
this.name = name;
}
Animal.prototype.setName = function(name) {
this.name = name;
}
function Dog(age) {
this.age = age;
}
Dog.prototype = Animal.prototype;
这样就实现了prototype的拷贝。
这种方法的好处就是不需要实例化对象(和方法一相比),节省了资源。弊端也是明显,除了和上文一样的问题,即constructor指向了父对象,还只能复制父对象用prototype声明的属性和方法。也即是说,上述代码中,Animal对象的name属性得不到复制,但能复制setName方法。最最致命的是,对子对象的prototype的任何修改,都会影响父对象的prototype,也就是两个对象声明出来的实例都会受到影响。所以,不推荐这种方法。
原型链
写过继承的人都知道,继承可以多层继承。而在JS中,这种就构成了原型链。上文也多次提到了原型链,那么,原型链是什么?一个实例,至少应该拥有指向原型的proto属性,这是JavaScript中的对象系统的基础。不过这个属性是不可见的,我们称之为“内部原型链”,以便和构造器的prototype所组成的“构造器原型链”(亦即我们通常所说的“原型链”)区分开。我们先按上述代码构造一个简单的继承关系:
function Animal(name) {
this.name = name;
}
function Dog(age) {
this.age = age;
}
var animal = new Animal("wangwang");
Dog.prototype = animal;
var dog = new Dog(2);
提醒一下,前文说过,所有对象都是继承空的对象的。所以,我们就构造了一个原型链。
结语:
所以现在你搞清楚构造函数、对象实例和原型对象之间的关系了吗?原型和原型链是 JS 中不可避免需要碰到的知识点,所以不慌,干就完事!