构造函数、对象实例和原型对象“三角恋关系”?

2,141 阅读7分钟

(作为当代大学生,标题就是要够骚才能骗点击嘛,轻点喷..)下面开始开车

在典型的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 中不可避免需要碰到的知识点,所以不慌,干就完事!