`
MirrorAvatar
  • 浏览: 46319 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ECMAScript函数的原型

阅读更多

函数的原型基本概念

  1. 每个函数都有一个原型(prototype)属性;
  2. 原型属性是一个指针,指向一个对象;
  3. 对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

理解函数原型对象(prototype)

  1. constructor属性。创建函数后,自动获取到此属性。默认情况下,函数prototype的constructor指向函数本身。

    function Foo() {
    }
    Foo.prototype.constructor === Foo;  //true
      
  2. prototype上其他方法继承自Object,如toString()、valueOf(),hasOwnPrototype()、isPrototypeOf()等等。

构造函数、函数的原型对象和构造函数实例之间的关系

当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性),指向构造函数的原型对象。ECMA-262第5版中管这个指针叫[[Prototype]]。这个连接存在于实例与构造函数的原型对象之间,而不是存在于实例与构造函数之间。

function Person() {
}

Person.prototype.name = "MirrorAvatar";
Person.prototype.age = 3;
Person.prototype.job = "coder";
Person.prototype.sayName = function() {
    alert(this.name);
};

var person1 = new Person();
person1.sayName();  //MirrorAvatar

var person2 = new Person();
person2.sayName();  //MirrorAvatar

person1.sayName === person2.sayName;  //true
 

构造函数Person、Person的原型对象prototype和Person的两个实例person1&&person2关系图:



 

文字描述:

  1. Person.prototype指向了原型对象;
  2. Person.prototype.constructor指回了Person;
  3. 原型对象不光只有一个constructor属性,还有后来添加上来的属性;
  4. Person的两个实例person1和person2仅仅指向了Person.prototype,它们与构造函数Person没有直接联系;
  5. person1和person2不包含属性和方法,但是可以访问到。

检测某个实例是否和某个原型对象存在关系

  1. isPrototypeOf

    //此方法继承自Object
    Person.prototype.isPrototypeOf(person1);  //true
    Person.prototype.isPrototypeOf(person2);  //true
      
  2. ECMAScript5的Object.getPrototypeOf()

    此方法返回[[Prototype]]的值,即返回这个对象的原型。

    Object.getPrototypeOf(person1) === Person.prototype;  //true
    Object.getPrototypeOf(person1).name;  //"MirrorAvatar"
      

多个对象实例共享原型所保存的属性和方法的基本原理

每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。

过程:

  1. 搜索对象实例本身。有,返回;无,继续。
  2. 搜索指针指向的原型对象。有,返回;无,返回undefined。

注意:

过对象实例访问保存在原型中的值,但却不能通过对象实例重写原型中的值。如果我们在实例中添加了一个属性,而该属性与实例原型中的一个属性同名,那我们就在实例中创建该属性,该属性将会屏蔽原型中的那个属性。

function Person() {
}

Person.prototype.name = "Cindy";

var person1 = new Person();
var person2 = new Person();

person1.name = "MirrorAvatar";

console.log(person1.name);  //"MirrorAvatar",值来着实例,屏蔽原型的
console.log(person2.name);  //"Cindy",值来自原型
person1.hasOwnProperty("name");  //true
person2.hasOwnProperty("name");  //false

delete person1.name;  //可以删除实例的属性
console.log(person1.name);  //"Cindy",值来自原型,说明只是屏蔽没有被重写
person1.hasOwnProperty("name");  //false

 

  • 大小: 31.8 KB
1
0
分享到:
评论

相关推荐

    ECMAScript概述

    ECMA-262简述 ECMAScript语言概述 ECMAScript对象概述(原型链Prototype Chain) ECMA-262主要术语 ...ECMAScript函数(new原理) ECMAScript内部属性(参考) ECMAScript执行环境作用域链图示 ECMA-262参考资料

    ECMAScript 2018快速入门 高清完整PDF

    本书分为13章,较为系统地介绍ECMAScript语言,内容包括变量与常量、表达式和运算符、字符串、数字和符号、数组和类型化数组、对象、函数、集合和映射、迭代器和生成器、Promise对象与异步函数、代理、类和模块,...

    详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)

    工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象。其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可。 ...

    JavaScript模式中文[pdf] 百度云

     ECMAScript 5  JSLint  Console  第2章 基本技巧  编写可维护的代码  尽量少用全局变量  for循环  for-in循环  不要增加内置的原型  SWitch模式  避免使用隐式类型转换  使用parseInt()的数值约定  ...

    JavaScript模式 斯托扬·斯特凡洛夫 著

    ECMAScript JSLint Co ole 第2章 基本技巧 编写可维护的代码 尽量少用全局变量 for循环 for-in循环 不要增加内置的原型 SWitch模式 避免使用隐式类型转换 使用pa eInt()的数值约定 编码约定 命名约定 编写注释 ...

    fringejs:基于原型的 JavaScript Web 应用程序框架

    许多类似的框架使用伪经典继承模式,它们试图通过创建函数的实例并使用函数的原型来继承类结构来模仿经典继承。 然而, fringejs 使用原型继承,因为 JavaScript 是基于原型的。 ####ECMAScript 5 标准:为了确保 ...

    JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

     工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象。其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可。...

    JavaScript知识点一

    虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。JavaScript的标准是...

    java?javascript

    虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。 JavaScript在1995年由...

    javascript.html实现表单验证

    虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。 [1] JavaScript在...

    【JavaScript源代码】ES5和ES6中类的区别总结.docx

     在 ES5 中主要是通过构造函数方式和原型方式来定义一个类,但是在 ES6 新引入了 class 关键字,使之具有了正式类的能力,类(class)是ECMAScript 中新的基础性语法糖结构。虽然 ES6 类表面上看起来可以支持正式的...

    《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型

    Object类具有下列属性: Constructor:对创建对象的函数的引用(指针),对于Object类,该指针指向原始的Object()函数 Prototype:对该对象的对象原型的引用。 Object类还有几个方法: HasOwnProperty(property):...

    ecmascript-examples:ECMAscript ES5-ES8的示例

    JS ECMAScript和TypeScript资源 励志房源 基本问题 JavaScript简介 浏览器控制台 在html中包含js 注释 资料类型 原始数据类型,值和参考 类型转换 变量-var,let和const 运营商 变量的功能和范围 使用console....

    proposal-csprng:ECMAScript的加密安全随机数生成

    这建议添加一个用户可寻址函数,该函数可用于使用密码安全的伪随机数值填充与TypedArray关联的ArrayBuffer的一部分。 该提案的某些部分源自 状态 阶段: 1 冠军:罗恩·巴克顿(@rbuckton) 有关此建议的详细状态...

    JavaScript 常见的继承方式汇总

     在ECMAscript中描述了原型链的概念,并将原型链作为实现继承的主要方法,其基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法。 构造函数和原型还有实例之间的关系:  每个构造函数都有一个原型...

    15分钟深入了解JS继承分类、原理与用法

    所以,下面所要说的原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承和寄生组合式继承都属于实现继承。 最后的最后,我会解释 ES6 中的 extend 语法利用的是寄生组合式继承。 1. 原型链继承 ...

    javascript手册.chw

    JavaScript 是一门基于原型、函数先行的语言,是一门多范式的语言,它支持面向对象编程,命令式编程,以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等,不支持 I/O,比如网络、存储和图形等,但...

    JavaScript for PHP Developers(中文版)第2版

    深入介绍的面向对象特性,包括原型、代码复用和继承。学习内建的API并了解其全局函数、属性和对象。学习最新的ECMAScript5标准的更新之处。在为大型应用程序编码的时候,使用常用的设计模式。 致谢 前言 第1章简介 ...

    史上最为详细的javascript继承(推荐)

    相信小伙伴们都知道到原型链继承(ECMAScript 中描述了原型链的概念,并将原型链作为实现继承的主要方法),因为原型链继承非常的强大,但是也有它的缺点,接下来咱们就按照上面的维度看看原型链继承到底是什么鬼 ...

Global site tag (gtag.js) - Google Analytics