Js关于原型以及原型链的详细介绍

来源:互联网 发布:分层网络模型优点 编辑:程序博客网 时间:2024/06/06 15:02

1、什么是原型?
原型就是一个对象,其他对象何以通过他来实现属性继承。

2、什么是对象?
在Js这门语言中,对象是可变的键控集合(keyed collections)。在js中,数组是对象,函数是对象,正则表达式正则表达式也是对象,当然,对象也是对象。对象主要分成两类:普通对象以及函数对象。Object 、Function 是 JS 自带的函数对象。下面举例说明

var o1 = {}; var o2 =new Object();var o3 = new f1();function f1(){}; var f2 = function(){};var f3 = new Function('str','console.log(str)');console.log(typeof Object); //function console.log(typeof Function); //function  console.log(typeof f1); //function console.log(typeof f2); //function console.log(typeof f3); //function   console.log(typeof o1); //object console.log(typeof o2); //object console.log(typeof o3); //object

从上面的例子不难看出,o1,o2,o3都是普通对象而所有带function都是函数对象。
这里要提一下创建对象的四种方法

1、使用new关键字创建对象,这也是最简单的创建方式

var person = new Object();person.name = "William Yao";person.age = "21";person.job = "Web Engineer";person.sayName = function(){    alert(this.name);}

换句俏皮的话就是:没对象?你自己创一个不就行了

2、使用字面量进行创建

var person ={    name: "William Yao",    age: 21,    job: "Web Enginner",    sayName: function(){        alert(this.name);    }}

这个例子中的person对象和前面例子中的person对象是一样的,都有相同的属性和方法。

3、使用工厂模式进行创建

function createPerson(name,age,job){    var i = new Object();    i.name = name;    i.age = age;    i.job = job;    i.sayName = function(){        alert(this.age);    }    return i;}

这种创建方式使我们比较常用的一种创建方式,主要用于拥有很多相似属性的对象进行创建的,这有点像工厂中的流水线生产,故而得名:工厂模式。但是这种模式也有他的弊端,那就是他并没有解决对象识别的问题,随着时代的发展,又有一种新的创建方式取代了他…..

4、使用构造函数模式进行创建

function Person(name,age,job){    this.name = name;    this.age = age;    this.job = job;    this.sayName = function(){        alert(this.name);    }}var person1 = new Person("William Yao",21,"Web Enginner");var person2 = new Person("Tracy",22,"doctor");

在这个例子中,Person()完全取代了createPerson()函数。注意,按照约定首写字母必须要大写,而非构造函数则是采用驼峰式命名。这种做法借鉴了其他oo语言,主要是为了区别ECMAScript中的其他函数。构造函数本身就是函数,只不过用来创建对象了而已。

细心的人可能会发现,这种使用创建对象的方法和上一个使用工厂模式创建对象有几点不同之处。首先,没有了new Object()这种显式的创建对象。其次,这种构造函数的方法直接将属性和方法赋值给了this。再者,取消了return语句。这样的做法会使函数能够更加精准的识别对象,从而提高效率。这种创建方法也是最流行的一种方法。对于构造函数的详细介绍,我会另写一篇文章进行叙述。

好啦,说完了对象的四种创建方式之后,我们开始说说什么是原型模式

原型模式根据官方的解释就是:我们创建的每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。 说句大白话就是,每一个函数都有一个prototype属性,我们可以利用这个属性来调动构造函数从而创建那个对象实例的原型对象。这样做的好处就是,不必在构造函数中定义对象实例的信息,而是将这些信息直接添加进原型对象中。感觉就像是一个数据库,里面有各种各样的数据,需要哪种就调动哪种。

    function Person(){        Person.prototype.name = "William Yao";        Person.prototype.age = 22;        Person.prototype.job = "Web Enginner";        Person.prototype.sayName = function(){            alert(this.name);        }        Person.prototype.sayAge = function(){            alert(this.age);        }        Person.prototype.sayJob = function(){            alert(this.job);        }    }        var person1 = new Person();        person1.sayName(); //William Yao        person1.sayAge();//22        person1.sayJob();//Web Enginner        var person2 = new Person();        person2.sayName();//William Yao        alert(person1.sayName == person2.sayName);

person1与person2访问的是同一组属性和同样的say….函数。这感觉又有点像现在市面上最流行的 “共享….”

在上面的代码中,我们加上了name、age、job、sayName、sayAge、sayJob。其实他还有一个默认属性constructor 在默认的情况下,所有的原型对象都会有一个默认的constructor 属性,这个属性(可以理解为指针)指向 prototype 属性所在的函数(Person)也就是说Person.prototype.constructor == Person 。这里我要解释一下,为什么Person.prototype会有一个constructor属性?因为Person.prototype可以看做是person的一个实例。
也就是说在 Person 被创建的同时也创建了一个它的实例对象并将这个实例赋值给它的 prototype

     var  = new Person();     Person.prototype = A;

原型对象(Person.prototype)是 构造函数(Person)的一个实例。

原型链
原型链就是存在于对象内部的一种链接,这种链接可以引用其他对象。

这里写图片描述
图片引用自《JavaScript高级程序设计》

原创粉丝点击