javascript进阶-原型prototype
2018-06-24 00:31:10来源:未知 阅读 ()
一、javascript原型认识
很多编程语言都有类的概念,我们可以拿原型和类进行比较,看看它们之间的区别以及相同点在哪里。
1、类:类是一个具体事物的抽象所以类是一个抽象的东西,在面向对象中类可以用来构造对象,这就是一个抽象—具体的过程。在现实生活中就好比:图纸造汽车。
2、原型:javascript中用原型来构造对象是一个具体—具体的过程。在现实生活中就好比某品牌汽车—其他牌子汽车。
二、设置对象的原型
1、Object.create(proto[,propertiesObject])
proto一个对象,作为新创建对象的原型。
实例:
//新建一个原型对象car var car = { name:'car', start: function(){ console.log(this.logo); } } //使用原型对象创建新的对象 var Bensz = Object.create(car); Bensz.logo = 'bensz'; //用新的对象Bensz调用start方法 Bensz.start();
上述代码运行结果是打印出了‘bensz’。
2、构造函数
构造函数可以用prototype属性设置原型,使用new创建对象。
实例:
//首先构造函数car function Car(logo){ this.logo = logo || 'unkown name'; } //设置car的prototype属性,这个属性是一个对象 Car.prototype = { strat: function(){ console.log(this.logo); } } var bensz = new Car('bensz'); bensz.strat();
上述代码也能打印中'bensz'
图解过程:
在用new关键字创建新的对象bensz时其实是有三个步骤。1、创建新对象bensz 2、设置bensz的_proto_ ,这是_proto_属性是指向car.prototype,3、Car.apply(bensz,[]),bensz执行Car上的logo赋值操作,这时bensz对象有了logo属性。
三、原型链
实例:
//首先构造函数car function Car(logo){ this.logo = logo || 'unkown name'; } //设置car的prototype属性,这个属性是一个对象 Car.prototype = { strat: function(){ console.log(this.logo); } } //创建一个构造函数bensz function Bensz(serialno){ this.serialno = serialno; } //设置bensz的prototype属性 为了一个car类型的对象 Bensz.prototype = new Car('bensz'); var bensz1 = new Bensz(12345); //定义了两个构造函数,第二个构造函数的原型不是一个普通的Object,而是Car类型的对象。
过程:1、创建一个Car构造函数,且设置它的prototype属性。2、创建一个Bensz构造函数,它的prototype属性是Car类型的对象,这个时候由于是new关键字创建的对象,这个对象就具有了_proto_属性,这个属性就指向Car.prototype。3、创建一个bensz1对象,也是由于是new关键字创建,它也有一个_proto_属性,这个属性就指向构造函数Bensz的prototype属性,即Bensz.prototype。
除此之外,我们可以发现Car.prototype可以利用new Object创建,因为它本身就是一个对象,所以它也具有_proto_属性,且指向的是Object.prototype。
所以整条原型链是:1、bensz1._proto_ —— 2、Bensz.prototype(new Car('bensz')) , Bensz.prototype._proto_—— 3、Car.prototype,Car.prototype._proto_——4、Object.prototype。
访问属性:先在本身的对象上找,如果没有沿着原型链往上找
修改与删除属性:只能修改和删除对象自身的属性
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:bootstrap-导航条
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- CSS3 2020-06-05
- 0基础怎么学web前端?新手到大神的进阶路线在这! 2020-05-06
- Web前端必备:JavaScript基础知识梳理 2020-04-07
- 如何做才能让你真正实现前端进阶? 2020-04-01
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash