今地铁上看慕课网js课程,又学习到关于原型的一些知识,记录如下。如有偏差欢迎指正:

三张图要连起来看哦~

图解:

1、创建一个函数foo.

2、运用函数的prototype属性(这个属性就是实例对象的原型对象),增加 z,并 z 赋值为3.

3、var obj = new foo()  实例化一个构造函数obj,并穿件obj.y=2,obj.x=1;

4、在obj函数中,x、y、z的值都可以取到,因为z是通过原型对象添加的,原型对象的作用就是定义所有对象共享的属性和方法。所以 'z' in obj;返回true.

5、hasOwnProperty:用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是,此方法无法检查该对象的原型链中是否具有该属性,所以obj.hasOwnProperty('z');返回false.

图解:

1、obj.z = 5;  给obj赋值为5,所以 obj.hasOwnProperty('z');返回为true。

2、foo.prototype.z 的值不会被修改仍是3.

3、obj.z 赋值为undefined,则obj.z 更改为undefined.

图解:

  使用 delete 删除 obj.z 的值5,注意:只删除obj对象上的自有属性,并不会影响原型链上的共有属性。

更新于2016.9.29


是什么

    • __proto__ 
      每个对象都拥有的属性

    • prototype 
      每个方法都拥有的属性

有什么用

  • 让js拥有了原型链来达到共享数据和方法的目的

js中万物皆对象,方法也是对象。所以方法既是方法也是对象,so方法既有__proto__又有prototype属性。

举个例子:

 var A = function(){}; // A是一个方法,当然也是个对象
var a = new A(); // a是一个由A创造出的对象,不是方法 //看一看对象非方法的行为
console.log(a.__proto__); //object
console.log(a.prototype); //undefined, 对象没有 //看一看方法的行为,方法也是对象哦 console.log(A.__proto__); //function
console.log(A.prototype); //object

更新于2016.9.27


转自(文/JC_Huang(简书作者)原文链接:http://www.jianshu.com/p/3bb6f208e459)

前言

js所有的函数都有一个prototype属性,这个属性引用了一个对象,即原型对象,简称原型。

函数包括构造函数、普通函数。下面要将的是构造函数的原型,但普通函数也有原型。

1、普通函数:

function F(){};
alert( F.prototype instanceof Object ) //true

补:instanceof

  运算符返回一个布尔值,表示一个对象是否由某个构造函数创建。

2、构造函数:

  用new关键字来调用定义的构造函数。默认返回的是一个新对象,这个新对象具有构造函数定义的变量和函数/方法。

通过下面例子了解 构造函数实例化对象的过程:

function A () {
this.x = x;
};
var obj = new A (1);

一切皆为对象

JavaScript的世界中的对象,追根溯源来自于 null

  万物初生时,一个null对象,凭空而生,接着ObjectFunction学着null的模样塑造了自己,并且它们彼此之间喜结连理,提供了prototypeconstructor,一个给子孙提供了基因,一个则制造万千子子孙孙。
在JavaScript中,null也是作为一个对象存在,基于它继承的子子孙孙,当属对象。
乍一看,null像是上帝,而ObjectFunction犹如JavaScript世界中的亚当夏娃

原型指针 __proto__

在JavaScript中,每个对象都拥有一个原型对象,而指向该原型对象的内部指针则是__proto__,通过它可以从中继承原型对象的属性,原型是JavaScript中的基因链接,有了这个,才能知道这个对象的祖祖辈辈。从对象中的__proto__可以访问到他所继承的原型对象。

var a = new Array();
a.__proto__ === Array.prototype // true

上面代码中,创建了一个Array的实例a,该实例的原型指向了Array.prototype
Array.prototype本身也是一个对象,也有继承的原型:

a.__proto__.__proto__ === Object.prototype  // true
// 等同于 Array.prototype.__proto__ === Object.prototype

这就说了明了,Array本身也是继承自Object的,那么Object的原型指向的是谁呢?

a.__proto__.__proto__.__proto__ === null  // true
// 等同于 Object.prototype.__proto__ === null

prototype.png

所以说,JavaScript中的对象,追根溯源都是来自一个null对象。佛曰:万物皆空,善哉善哉。

除了使用.__proto__方式访问对象的原型,还可以通过Object.getPrototypeOf方法来获取对象的原型,以及通过Object.setPrototypeOf方法来重写对象的原型

值得注意的是,按照语言标准,__proto__属性只有浏览器才需要部署,其他环境可以没有这个属性,而且前后的两根下划线,表示它本质是一个内部属性,不应该对使用者暴露。因此,应该尽量少用这个属性,而是用Object.getPrototypeofObject.setPrototypeOf,进行原型对象的读写操作。
这里用__proto__属性来描述对象中的原型,是因为这样来得更加形象,且容易理解。

原型对象 prototype

函数作为JavaScript中的一等公民,它既是函数又是对象,函数的原型指向的是Function.prototype

var Foo = function() {}
Foo.__proto__ === Function.prototype // true

函数实例除了拥有__proto__属性之外,还拥有prototype属性。
通过该函数构造的新的实例对象,其原型指针__proto__会指向该函数的prototype属性。

var a = new Foo();
a.__proto__ === Foo.prototype; // true

而函数的prototype属性,本身是一个由Object构造的实例对象。

Foo.prototype.__proto__ === Object.prototype; // true

prototype属性很特殊,它还有一个隐式的constructor,指向了构造函数本身。

Foo.prototype.constructor === Foo; // true
a.constructor === Foo; // true
a.constructor === Foo.prototype.constructor; // true

prototype2.png

原型链

概念

原型链作为实现继承的主要方法,其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
每个构造函数都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针(constructor),而实例都包含一个指向原型对象的内部指针(__proto__)。
那么,假如我们让原型对象等于另一个类型的实例,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立。
如此层层递进,就构造了实例与原型的链条,这就是原型链的基本概念。

意义

“原型链”的作用在于,当读取对象的某个属性时,JavaScript引擎先寻找对象本身的属性,如果找不到,就到它的原型去找,如果还是找不到,就到原型的原型去找。以此类推,如果直到最顶层的Object.prototype还是找不到,则返回undefine

亲子鉴定

在JavaScript中,也存在鉴定亲子之间DNA关系的方法:

  1. instanceof
    运算符返回一个布尔值,表示一个对象是否由某个构造函数创建。
  2. Object.isPrototypeOf()
    只要某个对象处在原型链上,isProtypeOf都返回true
var Bar = function() {}
var b = new Bar();
b instanceof Bar // true
Bar.prototype.isPrototypeOf(b) // true
Object.prototype.isPrototypeOf(Bar) // true

要注意,实例b的原型是Bar.prototype而不是Bar

一张历史悠久的图

jsobj_full.jpg

这是一张描述了ObjectFunction以及一个函数实例Foo他们之间原型之间联系。如果理解了上面的概念,这张图是不难读懂。

jacascript中的原型链以原型的更多相关文章

  1. Javascript原型链和原型继承

    哇好久都没有写随笔啦,整个人都慵懒啦. 为了不让大家忘记我,把以前写过的一些慢慢发出来. 在JS 中, 有两条链子,作用域链 和 原型链. 作用域链相对容易理解,两点 - 函数限定变量作用域,就是说, ...

  2. js 原型,原型链,原型链继承浅析

    对于网上的关于原型,原型链和原型链继承的晦涩语言说明就不累赘了,复制粘贴过来再解释一遍怕自己也整蒙了,本人最怕空气突然安静,四目对视,大眼对小眼,一脸懵逼. 我们先看下面

  3. 谈JS中的作用域链与原型链(1)

    学习前端也有一段时间了,觉得自己可以与大家分享一些我当初遇到疑惑的东西,希望能给对此问题有疑惑的朋友带来一点帮助. 先来普及一下JS的概念(不要嫌我啰嗦,可能一些朋友开始学习JS是跟着视频和写好的代码 ...

  4. JS中的原型链和原型的认识

    这篇文章主要是学习一下JavaScript中的难点------原型和原型链 自定义一个对象 我们学习一门编程语言,必然要使用它完成一些特定的功能,而面向对象的语言因为符合人类的认知规律,在这方面做得很 ...

  5. 面试题常考&必考之--js中的难点!!!原型链,原型(__proto__),原型对象(prototype)结合例子更易懂

    1>首先,我们先将函数对象认识清楚: 补充snow的另一种写法: var snow =function(){}; 2>其次:就是原型对象 每当我们定义一个函数对象的时候,这个对象中就会包含 ...

  6. JavaScript中的原型、原型链、原型模式

    今天,咱来聊聊JavaScript中的原型跟原型链 原型跟原型模式 这一块的知识,主要是设计模式方面的. 首先,我们知道JavaScript是面向对象的.既然是面向对象,那它自然也有相应的类跟对象等概 ...

  7. 从零开始学 Web 之 JS 高级(二)原型链,原型的继承

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. JavaScript原型与原型链,原型的实际应用

    原型链是js面向对象的基础,非常重要. 一,创建对象的几种方法: 1,字面量 var o1 = { name:'o1' }; 2,构造函数 var M = function(name){ this.n ...

  9. 275 原型与原型链:显式原型prototype ,隐式原型__proto__,隐式原型链,原型链_属性问题,给原型对象添加属性/方法

    1.所有函数都有一个特别的属性 prototype : 显式原型属性 [普通构造函数的实例对象没有prototype 属性,构造函数有__proto__属性,原型对象有__proto__属性 ] 2. ...

随机推荐

  1. 关于Docker官方CentOS镜像无法启动mysqld的总结

    很多童鞋反映,在Docker官方CentOS镜像中安装了Mysql server后,无法正常启动. 无法正常启动表现为两种情况: 1> 初始完数据库后,mysqld启动报错 2> syst ...

  2. AspNetPager分页控件配置

    AspNetPager是asp.net中常用的分页控件,下载AspNetPager.dll,添加引用,在工具栏就可以看到AspNetPager控件: 拖过来之后,设置如下属性: <webdiye ...

  3. 使用CSS3 制作一个material-design 风格登录界面

    心血来潮,想学学 material design 的设计风格,就尝试完成了一个登录页面制作. 这是整体效果. 感觉还不错吧,结尾会附上代码 在编写的过程中,没有使用任何图片或者字体图标,全部使用css ...

  4. mac+php+xdebug+phpstorm在苹果下配置xdebug一波三折

    1.下载xdebug文件 http://xdebug.org/wizard.php 将phpinfo()的源代码复制到文本框中,xdebug会提示如何配置和下载哪个版本的xdebug. 全部下载地址: ...

  5. C# 在word中查找及替换文本

    C# 在word中查找及替换文本 在处理word文档时,很多人都会用到查找和替换功能.尤其是在处理庞大的word文档的时候,Microsoft word的查找替换功能就变得尤为重要,它不仅能让我们轻易 ...

  6. 用JqueryUI的Dialog+IFrame实现仿模态窗口效果

    大家有没有想过这样一个问题,当我点击某个图片的时候,我想弹出这个图片信息的详情并修改,于是你首先想到的是不是window.open?window.open方法确实可以,但是有它的局限性,比如,标题显示 ...

  7. Unity打开摄像头占满全屏

    Unity打开摄像头占满全屏 AR项目需求,Unity打开摄像头作为背景渲染占满全屏~ Unity对设备硬件操作的API并不是太友好~打开一个摄像头,渲染到屏幕上也都得自己写,虽然步骤少,提取摄像头t ...

  8. 发布 Rafy 源码到 GitHub

      最近项目组开始使用 Git 来作为源码管理.我今天就顺便把 Rafy 的源码也迁移到了 github 上,方便大家使用.这是项目的地址:https://github.com/zgynhqf/raf ...

  9. 为jQuery写插件

    很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...

  10. .NET编码解码(HtmlEncode与HtmlEncode)

    编码代码: System.Web.HttpUtility.HtmlEncode("<a href=\"http://hovertree.com/\">何问起& ...