快捷导航
蚂蚁部落 网站首页 前端教程 JS教程 查看内容

栏目导航

≡基础知识≡

≡操作符≡

≡语句≡

≡函数≡

≡面向对象≡

≡对象≡

≡事件≡

≡事件对象≡

≡操作DOM方法≡

≡操作DOM属性≡

≡操作table表格≡

≡操作select控件≡

≡操作cookie≡

≡浏览器对象模型≡

≡进阶≡

JavaScript prototype 原型

2018-2-8 00:25| 发布者: antzone| 查看: 1245| 评论: 0|来自: 蚂蚁部落

一.基本概念:

每一个函数都具有prototype属性;此属性是一个指针,指向一个对象(原型对象),此对象被由构造函数创建的对象实例所共享,也就是会继承此对象。

对象实例有一个内部属性[[Prototype]],它也是一个指针,指向构造函数的原型对象。

先看一段代码:

[JavaScript] 纯文本查看 复制代码运行代码
function antzone(name,age){
  this.webname=name;
  this.age=age;
}
antzone.prototype.getName=function(){
  return this.webname;
}
var oantzone=new antzone("蚂蚁部落",3);
console.log(oantzone.getName());

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201703/02/002848d9uauxaa0xssxbeb.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面图片基本说明了prototype的作用。

二.代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
function antzone(name,age){
  this.webname=name;
  this.age=age;
}
var obj={
  address:"青岛市南区"
}
var oantzone=new antzone("蚂蚁部落",3);
antzone.prototype=obj;
console.log(oantzone.address);

很多朋友可能以为输出值是"青岛市南区",但是实际输出内容是undefined,这是因为在使用构造函数创建对象oantzone的时候,oantzone对象内部属性[[Prototype]]将会指向antzone()构造函数的原型prototype所指向的对象,而后来antzone.prototype=obj是重置构造函数的原型,而oantzone的内置属性[[Prototype]]指向依然是原来的对象,自然oantzone.address是undefined。

[JavaScript] 纯文本查看 复制代码运行代码
function antzone(name,age){
  this.webname=name;
  this.age=age;
}
var obj={
  address:"青岛市南区"
}
antzone.prototype=obj;
var oantzone=new antzone("蚂蚁部落",3);
console.log(oantzone.address);

和上一段代码的唯一不同,就是第八行和第九行进行了一下交换,这样就可以输出"青岛市南区",这个就不难理解了,因为对象实例是在重置原型以后创建的。

[JavaScript] 纯文本查看 复制代码运行代码
function antzone(name,age){
  this.webname=name;
  this.age=age;
}
var obj={
  address:"青岛市南区"
}
antzone.prototype.add=obj;
var oantzone=new antzone("蚂蚁部落",3);
console.log(oantzone.add.address);

以上代码只是修改对象原型,而不是重置对象原型。

2

鲜花

握手

雷人
1

路过

鸡蛋

刚表态过的朋友 (3 人)

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-2-19 15:56 , Processed in 0.101342 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部