理解原型与原型链

2018-06-24 01:52:10来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

原型与原型链是学习JavaScript这门语言不能不理解的两个重要概念,为什么?因为JavaScript是一门基于原型的语言。

怎么理解“JavaScript是一门基于原型的语言”?在软件设计模式中,有一种模式叫做原型模式,JavaScript正是利用这种模式而被创建出来。先来了解下原型模式的概念:原型模式是用于创建重复的对象,同时又能保证性能。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。这种模式是实现了一个原型接口,该接口用于创建当前对象的克隆。原型模式的目的是用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象。也就是说利用已有的一个原型对象,可以快速地生成和原型对象一样的新对象实例。

 

原型:

原型到底是什么?原型是一个可以被复制(或者叫克隆)的一个类,通过复制原型可以创建一个一模一样的新对象。通俗的说,原型就是一个模板,在设计语言中更准确的说是一个对象模板

 

看下面一段代码来理解原型:

var Person = function(name){
    this.name = name;
}
            
Person.prototype.sayHi = function(){
    console.log("Hello! I am " + this.name + ".");
}
            
var joe = new Person("joe");
var john = new Person("john");
            
joe.sayHi();    //Hello! I am joe.
john.sayHi();   //Hello! I am john.

从上面的代码可以看出来,原型(Person)定义了一些公用的属性和方法;利用原型(Person)创建出来的新对象实例(joe和john对象)会共享原型(Person)的所有属性和方法。

 

把代码修改一下:

"use strict";

var Person = function(name){
    this.name = name;
}
            
var joe = new Person("joe");
var john = new Person("john");

Person.prototype.sayHi = function(){
    console.log("Hello! I am " + this.name + ".");
}
            
joe.sayHi();    //Hello! I am joe.
john.sayHi();   //Hello! I am john.

这次把新创建的对象(joe和John)提前到原型(Person)的sayHi方法定义之前,并使用严格模式。原型(Person)的sayHi方法依然会被共享出去,所以原型(Person)的属性和方法总是被原型实例所共享

 

再来修改下代码:

var Person = function(name){
    this.name = name;
}

Person.prototype.sayHi = function(){
    console.log("Hello! I am " + this.name + ".");
}

var joe = new Person("joe");
var john = new Person("john");

joe.sayHi();    //Hello! I am joe.
john.sayHi();   //Hello! I am john.

joe.getName = function(){
    console.log(this.name);
}

joe.getName();    //joe
john.getName();   //undefined

 这次为新对象实例(joe)添加getName方法,最后只有实例(joe)拥有该方法,而另一个实例(john)并没有getName方法,这说明:通过原型创建的新对象实例是相互独立的

也正是因为这样对象的使用才能更加灵活、更加易于扩展。

 

原型链:

在javascript中,所有的对象都拥有一个__proto__属性指向该对象的原型(prototype)。在上面的代码中,执行console.log(joe.__proto__)后在控制台可以看到输出了原型(Person),然后继续执行console.log(Person.__proto__),控制台打印的结果是function(){},为什么Person的原型是function呢?这是因为Person是一个构造函数,它的本质就是一个函数。在javascript中函数是一等对象。

现在用箭头符号来表示上面原型创建的过程:

joe.__proto__  =>  Person,

Person.__proto__  =>  function(){}

由此可见,原型链记录了原型对象创建的整个过程,因此,我给原型链添加一个概念:原型链是原型对象创建过程的历史记录。

 

原型设计带来的问题:

当查找一个对象的属性时,JavaScript 会根据原型链向上遍历对象的原型,直到找到给定名称的属性为止。直到到达原型链的顶部仍然没有找到指定的属性,就会返回 undefined。

 

使用 for in 循环可以遍历对象所有的属性,包括该对象在原型链中的属性,如:

var A = {
    a:1,
    b:2
};
                
var B = Object.create(A);
var C = Object.create(B);
            
B.c = 3;
C.d = 4;

console.log(c)    //{d:4}
            
for(var key in c){
    console.log(c[key])
}

//会在控制台中依次打印出4 3 1 2 

注意在控制台中打印的顺序是 4 3 1 2,而不是 1 2 3 4。为什么?因为C的原型是B,B的原型是A。C对象只有一个d属性,执行for...in时先返回C.d,然后在从C的原型(B)中查找到并返回B.c,再从B的原型(A)中查找到并返回A.a和A.b,最后从A的原型(Object)中查找,发现Object中没有任何属性,于是结束for...in。所以最后的结果是 4 3 1 2。这就解释了原型链继承时查找属性的过程是先查找自身属性,当自身属性不存在时,会在原型链中逐级查找。

有时只需检查对象自身的属性,那么,这种消耗就是一种浪费,怎么解决呢?

 

hasOwnProperty 函数:

hasOwnProperty 函数可以用来检查对象自身是否含有某个属性,返回值是布尔值,当属性不存在时不会向上查找对象原型链。

 

在上面的代码中添加下面的代码,看看 hasOwnProperty 和 for in 的区别:

...

ifvar "a" in C){
    console.log(c["a"]) //属性 a 是原型链上的属性, 输出 1
}

if(C.hasOwnProperty("a")){
    console.log(c["a"]) //属性 a 不是自身属性,不会执行这一步
}

hasOwnProperty 函数只能检查对象是否拥有某个属性,那如何遍历对象的自身属性?

 

getOwnPropertyNames 函数:

getOwnPropertyNames 函数可以获取对象所有的自身属性,返回值是由对象自身属性名称组成的数组,同样不会向上查找对象原型链。

如:

console.log(Object.getOwnPropertyNames(C))  //输出 ["d"]

 

利用getOwnPropertyNames 函数遍历所有对象所有自身属性,例:

(fucntion(){
    var
    o = {a:1, b:2},
    propertys = Object.getOwnPropertyNames(o),
    len = propertys.length;

    for(var i = 0; i < len; i++){
        var key = propertys[i];
        console.log(o[key])      //输出 1, 2
    }
})();

 

 
 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:jscript定时器,一直用的东西,你真的明白吗?

下一篇:Vue中加载百度地图