JavaScript学习总结（五）原型和原型链详解

时间  2019-11-05
标签 javascript 学习 总结 原型 详解 栏目 JavaScript 繁體版
原文   原文链接

赞助我以写出更好的文章，give me a cup of coffee?javascript

私有变量和函数

在函数内部定义的变量和函数，若是不对外提供接口，外部是没法访问到的，也就是该函数的私有的变量和函数。前端

<script type="text/javascript">
    function Box(){
        var color = "blue";//私有变量
        var fn = function() //私有函数
        {
            
        }
    }
</script>

这样在函数对象Box外部没法访问变量color和fn，他们就变成私有的了：java

var obj = new Box();
    alert(obj.color);//弹出 undefined
    alert(obj.fn);//同上

静态变量和函数

当定义一个函数后经过点号 “.”为其添加的属性和函数，经过对象自己仍然能够访问获得，可是其实例却访问不到，这样的变量和函数分别被称为静态变量和静态函数。git

<script type="text/javascript">
    function Obj(){};

    Obj.num = 72;//静态变量
    Obj.fn = function()  //静态函数
    {
        
    }  
    
    alert(Obj.num);//72
    alert(typeof Obj.fn)//function
    
    var t = new Obj();
    alert(t.name);//undefined
    alert(typeof t.fn);//undefined
</script>

实例变量和函数

在面向对象编程中除了一些库函数咱们仍是但愿在对象定义的时候同时定义一些属性和方法，实例化后能够访问，js也能作到这样github

<script type="text/javascript">
          function Box(){
                this.a=[]; //实例变量
                this.fn=function(){ //实例方法
                    
                }
            }
            
            console.log(typeof Box.a); //undefined
            console.log(typeof Box.fn); //undefined
            
            var box=new Box();
            console.log(typeof box.a); //object
            console.log(typeof box.fn); //function
</script>

为实例变量和方法添加新的方法和属性面试

<script type="text/javascript">
function Box(){
                this.a=[]; //实例变量
                this.fn=function(){ //实例方法
                    
                }
            }
            
            var box1=new Box();
            box1.a.push(1);
            box1.fn={};
            console.log(box1.a); //[1]
            console.log(typeof box1.fn); //object

            var box2=new Box();
            console.log(box2.a); //[]
            console.log(typeof box2.fn); //function
</script>

在box1中修改了a和fn，而在box2中没有改变，因为数组和函数都是对象，是引用类型，这就说明box1中的属性和方法与box2中的属性与方法虽然同名但却不是一个引用，而是对Box对象定义的属性和方法的一个复制。编程

这个对属性来讲没有什么问题，可是对于方法来讲问题就很大了，由于方法都是在作彻底同样的功能，可是却又两份复制，若是一个函数对象有上千和实例方法，那么它的每一个实例都要保持一份上千个方法的复制，这显然是不科学的，这可肿么办呢，prototype应运而生。segmentfault

基本概念

咱们建立的每一个函数都有一个prototype属性，这个属性是一个指针，指向一个对象，这个对象的用途是包含能够由特定类型的全部实例共享的属性和方法。那么，prototype就是经过调用构造函数而建立的那个对象实例的原型对象。数组

使用原型的好处是可让对象实例共享它所包含的属性和方法。也就是说，没必要在构造函数中添加定义对象信息，而是能够直接将这些信息添加到原型中。使用构造函数的主要问题就是每一个方法都要在每一个实例中建立一遍。浏览器

在JavaScript中,一共有两种类型的值,原始值和对象值。每一个对象都有一个内部属性 prototype ,咱们一般称之为原型。原型的值能够是一个对象,也能够是null。若是它的值是一个对象，则这个对象也必定有本身的原型。这样就造成了一条线性的链，咱们称之为原型链。

含义

函数能够用来做为构造函数来使用。另外只有函数才有prototype属性而且能够访问到，可是对象实例不具备该属性，只有一个内部的不可访问的__proto__属性。__proto__是对象中一个指向相关原型的神秘连接。按照标准，__proto__是不对外公开的，也就是说是个私有属性，可是Firefox的引擎将他暴露了出来成为了一个共有的属性，咱们能够对外访问和设置。

<script type="text/javascript">
    var Browser = function(){};
    Browser.prototype.run = function(){
        alert("I'm Gecko,a kernel of firefox");
    }
    
    var Bro = new Browser();
    Bro.run();
</script>

当咱们调用Bro.run()方法时，因为Bro中没有这个方法，因此，他就会去他的__proto__中去找，也就是Browser.prototype，因此最终执行了该run()方法。（在这里，函数首字母大写的都表明构造函数，以用来区分普通函数）

当调用构造函数建立一个实例的时候，实例内部将包含一个内部指针（__proto__）指向构造函数的prototype，这个链接存在于实例和构造函数的prototype之间，而不是实例与构造函数之间。

<script type="text/javascript">
function Person(name){                             //构造函数
                this.name=name;
            }
            
            Person.prototype.printName=function() //原型对象
            {
                alert(this.name);
            }
            
            var person1=new Person('Byron');//实例化对象
            console.log(person1.__proto__);//Person
            console.log(person1.constructor);//本身试试看会是什么吧
            console.log(Person.prototype);//指向原型对象Person
            var person2=new Person('Frank');
</script>

Person的实例person1中包含了name属性，同时自动生成一个__proto__属性，该属性指向Person的prototype，能够访问到prototype内定义的printName方法，大概就是这个样子的:

27224146-a78177522b814194a4eaaa840e1b4aea.png
　每一个JavaScript函数都有prototype属性，这个属性引用了一个对象，这个对象就是原型对象。原型对象初始化的时候是空的，咱们能够在里面自定义任何属性和方法，这些方法和属性都将被该构造函数所建立的对象继承。

那么，如今问题来了。构造函数、实例和原型对象三者之间有什么关系呢？

构造函数、实例和原型对象的区别

实例就是经过构造函数建立的。实例一创造出来就具备constructor属性（指向构造函数）和__proto__属性（指向原型对象），

构造函数中有一个prototype属性，这个属性是一个指针，指向它的原型对象。

原型对象内部也有一个指针（constructor属性）指向构造函数:Person.prototype.constructor = Person;

实例能够访问原型对象上定义的属性和方法。

在这里person1和person2就是实例，prototype是他们的原型对象。

再举个栗子：

<script type="text/javascript">
    function Animal(name)   //积累构造函数
    {
        this.name = name;//设置对象属性
    }
    
    Animal.prototype.behavior = function() //给基类构造函数的prototype添加behavior方法
    {  
        alert("this is a "+this.name);
    }
    
    var Dog = new Animal("dog");//建立Dog对象
    var Cat = new Animal("cat");//建立Cat对象
    
    Dog.behavior();//经过Dog对象直接调用behavior方法
    Cat.behavior();//output "this is a cat"
    
    alert(Dog.behavior==Cat.behavior);//output true;
</script>

能够从程序运行结果看出，构造函数的prototype上定义的方法确实能够经过对象直接调用到，并且代码是共享的。（能够试一下将Animal.prototype.behavior 中的prototype属性去掉，看看还能不能运行。）在这里，prototype属性指向Animal对象。

数组对象实例

再看个数组对象的实例。当咱们建立出array1这个对象的时候，array1实际在Javascript引擎中的对象模型以下：

var array1 = [1,2,3];

图片描述

array1对象具备一个length属性值为3，可是咱们能够经过以下的方法来为array1增长元素：

array1.push(4);

push这个方法来自于array1的__proto__成员指向对象的一个方法(Array.prototye.push())。正是由于全部的数组对象（经过[]来建立的）都包含有一个指向同一个具备push,reverse等方法对象(Array.prototype)的__proto__成员，才使得这些数组对象可使用push,reverse等方法。

函数对象实例

function Base() {  
    this.id = "base" 
}

图片描述

var obj = new Base();

这样代码的结果是什么，咱们在Javascript引擎中看到的对象模型是：

图片描述

new操做符具体干了什么呢?其实很简单，就干了三件事情。

var obj  = {};  
obj.__proto__ = Base.prototype;  
Base.call(obj);

原型链

原型链：当从一个对象那里调取属性或方法时，若是该对象自身不存在这样的属性或方法，就会去本身关联的prototype对象那里寻找，若是prototype没有，就会去prototype关联的前辈prototype那里寻找，若是再没有则继续查找Prototype.Prototype引用的对象，依次类推，直到Prototype.….Prototype为undefined（Object的Prototype就是undefined）从而造成了所谓的“原型链”。

<script type="text/javascript">
    function Shape(){
        this.name = "shape";
        this.toString = function(){
            return this.name;
        }
    }
    function TwoShape(){
        this.name = "2 shape";
    }
    function Triangle(side,height){
        this.name = "Triangle";
        this.side = side;
        this.height = height;
        this.getArea = function(){
            return this.side*this.height/2;
        }
    }
    
    TwoShape.prototype = new Shape();
    Triangle.prototype = new TwoShape();
</script>

这里，用构造器Shape()新建了一个实体，而后用它去覆盖该对象的原型。

<script type="text/javascript">
    function Shape(){
        this.name = "shape";
        this.toString = function(){
            return this.name;
        }
    }
    function TwoShape(){
        this.name = "2 shape";
    }
    function Triangle(side,height){
        this.name = "Triangle";
        this.side = side;
        this.height = height;
        this.getArea = function(){
            return this.side*this.height/2;
        }
    }
    
    TwoShape.prototype = new Shape();
    Triangle.prototype = new TwoShape();
    
    TwoShape.prototype.constructor = TwoShape;
    Triangle.prototype.constructor = Triangle;
    
    var my = new Triangle(5,10);
    my.getArea();
    my.toString();//Triangle
    my.constructor;//Triangle(side,height)
</script>

原型继承

原型继承：
在原型链的末端，就是Object构造函数prototype属性指向的那个原型对象。这个原型对象是全部对象的祖先，这个老祖宗实现了诸如toString等全部对象天生就该具备的方法。其余内置构造函数，如Function，Boolean，String，Date和RegExp等的prototype都是从这个老祖宗传承下来的，但他们各自又定义了自身的属性和方法，从而他们的子孙就表现出各自宗族的那些特征。

ECMAScript中，实现继承的方法就是依靠原型链实现的。

<script type="text/javascript">
    function Father(){             //被继承的函数叫作超类型（父类，基类）
    this.name = "Jack";
}

function Son(){          //继承的函数叫作子类型（子类，派生类）
    this.age = 10;
}
//经过原型链继承，赋值给子类型的原型属性
//new Father()会将father构造里的信息和原型里的信息都交给Son

Son.prototype = new Father();//Son继承了Father,经过原型，造成链条

var son = new Son();
alert(son.name);//弹出 Jack
</script>

原型链的问题：原型链虽然很强大，能够用它来实现继承，但它也存在一些问题。其中最主要的问题来自包含引用类型的值原型。包含引用类型的原型属性会被全部实例共享；而这也正是为何要在构造函数中，而不是在原型对象中定义属性的缘由。在经过原型来实现继承时，原型实际上回变成另外一个类型的实例。因而，原先的实例属性也就变成了原型的属性。

在建立子类型的实例时，不能向超类型的构造函数中传递参数。实际上，应该说是没有办法在不影响全部对象实例的状况下，给超类型的构造函数传递参数。再加上刚刚讨论的因为原型中包含引用类型值所带来的问题，实践中不多会单独使用原型链。

再举个栗子：

<script type="text/javascript">
    function Person(name)
    {
        this.name = name;//设置对象属性
    };
    
    Person.prototype.company = "Microsoft";//设置原型的属性
    Person.prototype.SayHello = function() //原型的方法
    {  
        alert("Hello,I'm "+ this.name+ " of " + this.company);
    };
    
    var BillGates = new Person("BillGates");//建立person对象
    BillGates.SayHello();//继承了原型的内容，输出"Hello,I'm BillGates of Microsoft"
    
    var Jobs = new Person("Jobs");
    Jobs.company = "Apple";//设置本身的company属性，掩盖了原型的company属性
    Jobs.SayHello = function()
    {
        alert("Hi,"+this.name + " like " + this.company);
    };
    Jobs.SayHello();//本身覆盖的属性和方法，输出"Hi,Jobs like Apple"
    BillGates.SayHello();//Jobs的覆盖没有影响原型，BillGates仍是照样输出
</script>

__ptoto__属性

__ptoto__属性（IE浏览器不支持）是实例指向原型对象的一个指针，它的做用就是指向构造函数的原型属性constructor，经过这两个属性，就能够访问原型里的属性和方法了。

Javascript中的对象实例本质上是由一系列的属性组成的，在这些属性中，有一个内部的不可见的特殊属性——__proto__，该属性的值指向该对象实例的原型，一个对象实例只拥有一个惟一的原型。

<script type="text/javascript">
    function Box(){        //大写，表明构造函数
        Box.prototype.name = "trigkit4";//原型属性
        Box.prototype.age = "21";
        Box.prototype.run = function()//原型方法
        {  
            return this.name + this.age + 'studying';
        }
    }
    
    var box1 = new Box();
    var box2 = new Box();
    alert(box1.constructor);//构造属性，能够获取构造函数自己，
                            //做用是被原型指针定位，而后获得构造函数自己
</script>

__proto__属性和prototype属性的区别

prototype是function对象中专有的属性。
__proto__是普通对象的隐式属性，在new的时候，会指向prototype所指的对象；
__ptoto__其实是某个实体对象的属性，而prototype则是属于构造函数的属性。__ptoto__只能在学习或调试的环境下使用。

原型模式的执行流程

1.先查找构造函数实例里的属性或方法，若是有，就当即返回。
2.若是构造函数的实例没有，就去它的原型对象里找，若是有，就当即返回

原型对象的

<script type="text/javascript">
    function Box(){        //大写，表明构造函数
        Box.prototype.name = "trigkit4";//原型属性
        Box.prototype.age = "21";
        Box.prototype.run = function()//原型方法
        {  
            return this.name + this.age + 'studying';
        }
    }
    
    var box1 = new Box();
    alert(box1.name);//trigkit4,原型里的值
    box1.name = "Lee";
    alert(box1.name);//Lee,就进原则
    
    var box2 = new Box();
    alert(box2.name);//trigkit4,原型的值，没有被box1修改
</script>

构造函数的

<script type="text/javascript">
    function Box(){                   
        this.name = "Bill";
    }
    
    Box.prototype.name = "trigkit4";//原型属性
    Box.prototype.age = "21";
    Box.prototype.run = function()//原型方法
    {  
            return this.name + this.age + 'studying';
    }

    var box1 = new Box();
    alert(box1.name);//Bill,原型里的值
    box1.name = "Lee";
    alert(box1.name);//Lee,就进原则
</script>

综上，整理一下：

<script type="text/javascript">
    function Person(){};
    
    Person.prototype.name = "trigkit4";
    Person.prototype.say = function(){
        alert("Hi");
    }
    
    var p1 = new Person();//prototype是p1和p2的原型对象
    var p2 = new Person();//p2为实例化对象，其内部有一个__proto__属性，指向Person的prototype
    
    console.log(p1.prototype);//undefined,这个属性是一个对象，访问不到
    console.log(Person.prototype);//Person
    console.log(Person.prototype.constructor);//原型对象内部也有一个指针（constructor属性）指向构造函数
    console.log(p1.__proto__);//这个属性是一个指针指向prototype原型对象
    p1.say();//实例能够访问到在原型对象上定义的属性和方法
    
</script>
构造函数.prototype = 原型对象
原型对象.constructor = 构造函数(模板)
原型对象.isPrototypeof(实例对象)   判断实例对象的原型 是否是当前对象

工厂模式

function createObject(name,age){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    return obj;
}

工厂模式解决了实例化对象大量重复的问题，但还有一个问题，那就是根本没法搞清楚他们究竟是哪一个对象的实例。
使用构造函数的方法，既解决了重复实例化的问题，又解决了对象识别的问题。

使用构造函数的方法和工厂模式的不一样之处在于：

1.构造函数方法没有显示的建立对象(new Object());
 2.直接将属性和方法赋值给this对象
 3.没有return 语句

当使用了构造函数，而且new 构造函数()，那么就在后台执行了new Object()；
函数体内的this表明了new Object()出来的对象

1.判断属性是在构造函数的实例里，仍是在原型里，可使用`hasOwnProperty()`函数
2.字面量建立的方式使用constructor属性不会指向实例，而会指向Object，构造函数建立的方式则相反
为何指向Object？由于Box.prototype = {};这种写法其实就是建立了一个新对象。
而每建立一个函数，就会同时建立它的prototype，这个对象也会自动获取constructor属性
3.若是是实例方法，不一样的实例化，他们的方法地址是不同的，是惟一的
4.若是是原型方法，那么他们的地址的共享的

原型扩展：详解js闭包

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程