原型链学习总结

原型链

概念

原型链是一种机制,指的是JavaScript每个对象包括原型对象都有一个内置的[[proto]]属性指向创建它的函数对象的原型对象,即prototype属性。

作用

原型链的存在,主要是为了实现对象的继承

理解

要理解原型链,需要从几个概念入手。

1、函数对象

在JavaScript中,函数即对象。

2、原型对象

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

//函数对象
function F(){};
console.log(F.prototype)

//普通对象
var a = {};
console.log(a.prototype);//undefined

3、__proto__

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

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

//函数对象
function F(){};
F.prototype = {
    hello : function(){}
};
var f = new F();
console.log(f.__proto__)

4、new

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

var o = {};
o.__proto__ = F.prototype;
F.call(o);

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

5、constructor

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

function F(){};
F.prototype.constructor === F;

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

function F(){};
F.prototype = {
    constructor : F,
    doSomething : function(){}
}

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

6、原型链的内存结构

function F(){
    this.name = ‘zhang‘;
};
var f1 = new F();
var f2 = new F();

为了严谨起见,区分对象和变量

原文地址:https://www.cnblogs.com/linyunchao/p/10576123.html

时间: 2024-10-31 11:43:09

原型链学习总结的相关文章

原型原型链学习记录

这是一篇学习笔记. 个人心得: 关于原型和原型链这一块,很难,但是,一旦理解,就通了. 对于这一块,我之前不懂的时候,非要去弄明白,特别痛苦,之后,看到了王福朋老师的闭包原型系列,真的是茅塞顿开!看完之后,我就拿起JavaScript高程3,高程3第6章节,耐心跟着看也就明白了.之后,再去做一些图解,如果能够根据继承画出所有的关系,没有矛盾的点,那就基本没问题了.再到网上找差不多的文章看,如果没有冲突点,那这一块就没问题了. 参考的内容: http://www.cnblogs.com/wangf

JS 原型链学习总结

废话篇: 在js的学习过程中有一大难点就是原型链.学习的时候一直对这一内容不是十分的明白.纠结的我简直难受.,型号总算给他弄通了,哇咔咔,总算可以不用在睡梦中还想着他了. 正文篇: 要了解原型链我们首先要记住的一点是JS中所有的东西都可以用对象来理解.函数在JS中实际上也是一个对象.然后再去看原型链的东西. 上图是首要的: 实际上我们可以吧JS中的对象看成两种,一种是我们所熟知的一般的对象,还有一种就是JS中所有的方法对象. 一般对象: 对于一般的对象而言,其实际上就是一个方法与属性的集合,而在

javascript原型原型链 学习随笔

理解原型和原型链.需从构造函数.__proto__属性(IE11以下这个属性是undefined,请使用chrome调试).prototype属性入手. JS内置的好多函数,这些函数又被叫做构造函数.如:Object---Array---Function---Math---Date---String---Number---Boolean---Symbol---RegExp. JS里,所有的对象,都是其构造函数的实例.如{}是Object的一个实例,[]是Array的一个实例.fn() {}是Fu

JavaScript原型链学习

function foo(){} foo.prototype.z = 3; var obj = new foo(); obj.y = 2; obj.x = 1; obj.x; //1 obj.y; //2 obj.z; //3 typeof obj.toString; //'function' 'z' in obj; //true obj.hasOwnProperty('z'); //false 首先,我们通过function foo()去定义一个函数对象..那么,foo()对象自动带有prot

JavaScript原型与原型链学习笔记

一.什么是原型?原型是一个对象,其他对象可以通过它实现属性继承.简单的说就是任何一个对象都可以成为原型 prototype属性: 我们创建的每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,而这个对象包含可以有特定类型的所有实例共享的属性和方法.这个对象就是原型对象(也就是某个对象的原型所引用的对象).1.总之只要创建了函数,该函数都有一个prototype属性,指向函数的原型对象. 如上图,Person是一个函数,右侧的方框就是它的原型. 2.默认情况下所有原型对象都会

JavaScript 原型链学习(一)原型对象

在JavaScript中创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有的实例共享的属性和方法.如果按照字面意思来理解,那么prototype就是通过调用构造函数而创建那个实例的原型对象.使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法.换句话说,不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中,如下例所示: function Person(){} Person.protot

JavaScript 原型链学习(三)原型对象存在的问题 与 组合使用构造函数和原型

原型对象也不是没有缺点.首先,它省略了为构造函数传递初始化参数这一环节, 结果所有实例在默认情况下都将取得相同的属性值.虽然这会在某种程度上带来一些不方便, 但还不是原型对象的最大问题.原型对象的最大问题是由其共享的本性所导致的.原型中所有属性是被很多实例共享的,这种共享对于函数非常合适.对于那些包含基本值的属性倒也说得过去,毕竟(如前面的例子所示),通过在实例上添加个同名属性, 可以隐藏原型中的对应属性.然而,对于包含引用类型值的属性来说,问题就比较突出了.来看下面的例子. function

JavaScript学习总结(五)原型和原型链详解

转自:http://segmentfault.com/a/1190000000662547 私有变量和函数 在函数内部定义的变量和函数,如果不对外提供接口,外部是无法访问到的,也就是该函数的私有的变量和函数. <script type="text/javascript"> function Box(){ var color = "blue";//私有变量 var fn = function() //私有函数 { } } </script> 这

&lt;深入理解JavaScript&gt;学习笔记(5)_强大的原型和原型链

前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. (prototypal :原型.学好英语还是很重要的) 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大.实现传统的类继承模型是很简单,但是实现 JavaScript 中的原型继承则要困难的多. 由于 JavaScript 是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链. 原型