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

栏目导航

≡基础知识≡

≡操作符≡

≡语句≡

≡函数≡

≡面向对象≡

≡对象≡

≡事件≡

≡事件对象≡

≡操作DOM方法≡

≡操作DOM属性≡

≡操作table表格≡

≡操作select控件≡

≡操作cookie≡

≡浏览器对象模型≡

≡进阶≡

JavaScript 原型链

2017-9-3 01:37| 发布者: admin| 查看: 1360| 评论: 0|来自: 蚂蚁部落

传智播客

关于prototype原型可以参阅JavaScript prototype 原型一章节。

原型链是一种机制,指的是JavaScript每个对象包括原型对象都有一个内置的[[proto]]属性指向创建它的函数对象的原型对象。原型链的存在,主要是为了实现对象的继承。

要理解原型链,需要从几个概念入手,看一个图示:

a:3:{s:3:\"pic\";s:43:\"portal/201703/06/013729sbfayf47fybrb8tl.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

一.函数对象:

就是创建对象实例用到的构造函数,函数本身也是一个对象。

代码如下:

[JavaScript] 纯文本查看 复制代码运行代码
function Student(studentName,age) {
  this.sex = "男生";
  this.address = "青岛";
  this.studentName = studentName;
  this.age = age;
}
var stundet = new Student("小明", 15);

二.原型对象:

当定义一个函数对象的时候,会包含一个叫prototype预定义的属性,它就是原型对象。

[JavaScript] 纯文本查看 复制代码运行代码
//函数对象
function F(){};
console.log(F.prototype)

a:3:{s:3:\"pic\";s:43:\"portal/201703/06/014044kzurnbyluunquuk4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

[JavaScript] 纯文本查看 复制代码运行代码
//普通对象
var a = {};
console.log(a.prototype);//undefined

a:3:{s:3:\"pic\";s:43:\"portal/201703/06/014158qyd4fchlf5uulfa5.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

三.__proto__:

JavaScript在创建的对象实例,都会有一个[[proto]]的内置属性,用于指向创建它的构造函数的prototype原型对象。原型对象也有[[proto]]属性,因此在不断的指向中,形成了原型链。

举个例子来说,我们将对象F的原型对象修改一下,就可以清楚看到上述的关系

[JavaScript] 纯文本查看 复制代码运行代码
//函数对象
function F(){};
F.prototype = {
    hello : function(){}
};
var f = new F();
console.log(f.__proto__)

a:3:{s:3:\"pic\";s:43:\"portal/201703/06/014438vuday6yiyciajrrg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

四.new:

当使用new去调用构造函数时,相当于执行:

[JavaScript] 纯文本查看 复制代码运行代码
var o = {};
o.__proto__ = F.prototype;
F.call(o);

因此,在原型链的实现上,new起到了很关键的作用。

五.constructor:

原型对象prototype都有个预定义的constructor属性,用来引用它的函数对象。这是一种循环引用。

[JavaScript] 纯文本查看 复制代码运行代码
function F(){};
F.prototype.constructor === F;

a:3:{s:3:\"pic\";s:43:\"portal/201703/06/014706tk14lfb2vqbbi9xf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

在实际运用中,经常会有下列的写法

[JavaScript] 纯文本查看 复制代码运行代码
function F(){};
F.prototype = {
  constructor : F,
  doSomething : function(){}
}

这里要加constructor是因为重写了原型对象,constructor属性就消失了,需要自己手动补上。

原型链的内存结构:

[JavaScript] 纯文本查看 复制代码运行代码
function F(){
  this.name = 'zhang';
};
var f1 = new F();
var f2 = new F();

原型链图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201703/06/014946zwodr25bwb0rebw0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}


鲜花

握手

雷人

路过

鸡蛋

最新评论

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

GMT+8, 2017-12-13 05:30 , Processed in 0.069187 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部