`
MirrorAvatar
  • 浏览: 47939 次
  • 性别: 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概述

    4. **函数与new原理**:ECMAScript中的函数不仅是可调用的代码块,还可以作为值传递和存储。`new`关键字用于创建一个新的对象实例,并将其关联到一个构造函数,执行构造函数的代码以初始化新对象。 5. **内部属性**...

    JavaScript权威指南-ECMAScript5.pdf

    7. **原型与继承**:JavaScript使用原型链实现继承,每个对象都有一个`__proto__`属性指向其构造函数的原型。ES5中的`Object.create()`和ES6的类继承都是基于原型链的。 8. **闭包**:闭包是一种函数特性,它可以...

    ECMAScript5.1中文版说明

    - 箭头函数(ES6引入,但与ECMAScript 5.1相关联,因为它是在5.1之后出现的)提供简洁的语法来定义函数。 4. **对象** - 对象是键值对的集合,键可以是字符串或符号(ES6引入),值可以是任何类型。 - 对象字面...

    ECMAScript 6 第三版

    **ECMAScript 6(简称ES6)是JavaScript语言的一个重大升级版本,它引入了许多新的特性和改进,为开发者提供了更强大的工具和更简洁的语法。阮一峰老师的《ES6标准入门》第三版是一本深入讲解这些新特性的权威著作,...

    ECMAScript

    在ES2015之前,JavaScript中的对象是通过构造函数和原型链来创建的,这种方式对于新手来说比较难以理解。而类提供了一种更接近于其他编程语言的方式来创建和管理对象。 模块是ES2015中的另一个重要特性。模块可以将...

    ECMAScript全套(5,6,2018).zip

    同时,`Object.create()`用于创建基于原型的对象,`JSON`对象则为数据交换提供了标准格式。 **ECMAScript 6(ES6,ES2015)** ES6,又称为ES2015,是JavaScript历史上最大的一次更新,引入了大量新特性,包括: 1. ...

    ECMAScript 6 入门(第三版)

    4. **类与继承**:ES6引入了基于原型的类语法,使得面向对象编程更加直观。类的继承通过`extends`关键字实现,可以使用`super`关键字调用父类的方法和属性。 5. **解构赋值**:允许从数组或对象中提取数据,将其...

    ECMAScript-Edition5-小试

    ### ECMAScript 5 版本特性解析 #### 引言 随着互联网技术的迅猛发展,JavaScript 作为一种广泛应用于浏览器端的脚本语言,其重要性日益凸显。为了更好地满足开发者的实际需求并提高编程效率,ECMAScript 第五版...

    深度解析 ECMAScript 6

    ES6 引入了类的概念,虽然本质上仍然是基于原型的继承,但它提供了更简洁的面向对象编程语法。`class`关键字用于定义类,`constructor`方法用于初始化实例,`extends`关键字实现继承,`super`关键字用于调用父类的...

    ECMAScript 6 入门(第三版 )

    3. **类与继承**:ES6引入了类的概念,提供了更面向对象的编程风格,但其实质依然是基于原型的继承。类可以定义构造函数、方法,并通过extends关键字实现继承。 4. **模板字符串**:使用反引号(`)创建字符串,可以...

    高性能JavaScript 2015版本 ECMAScript 6入门 JavaScript 5

    1. **类和模块**:在ES2015中,JavaScript引入了类的概念,虽然本质上仍然是基于原型的继承,但语法上更接近传统的面向对象语言。同时,模块系统允许开发者更好地组织和管理代码,避免全局变量污染,通过`import`和`...

    ECMAScript 2018快速入门 高清完整PDF

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

    ECMAScript 6入门 第二版 阮一峰 pdf高清完整版

    2. **类与继承**:ES6 提供了基于原型的面向对象编程的新语法,引入了`class`关键字来定义类,以及`extends`关键字支持继承,使JavaScript的面向对象编程更加简洁和直观。 3. **箭头函数**:箭头函数提供了一种更...

    Javascript解释器在ECMAScript中运行Javascript代码

    对于对象,它需要处理原型链和原型继承等特性。 此外,ECMAScript引入了模块系统(ES6的import/export),使得JavaScript代码可以被组织和隔离。JavaScript解释器需要能够正确处理模块导入和导出,确保模块间的依赖...

    besen-master_delphi_inchknf_ECMAScript_

    要实现ECMAScript的原型链,可以使用Delphi的类(class)和接口(interface)来模拟。类可以作为实例的模板,而接口可以用于实现多继承。 对于严格模式,虽然Pascal语言本身没有直接对应的概念,但可以通过在编译...

    ECMAScript从零开始学-课件

    面向对象是JavaScript编程的重要组成部分,包括类、构造函数、原型链、继承、封装和多态等概念。ES6引入了class关键字,使得面向对象编程更加直观。 通过以上这些内容的学习,你将能够掌握ECMAScript的基本用法,...

    Learning ECMAScript 6

    ES6,即ECMAScript 2015,是JavaScript语言的一次重要更新。它引入了许多新的特性,大大增强了JavaScript的能力和灵活性。了解和掌握这些新特性对于前端开发者来说是至关重要的。本篇文章将深入介绍ES6的核心知识点...

    ECMAScript5.1规范中文版

    - **内置函数(Built-in Function)**:ECMAScript 规定必须由实现提供的函数。 - **属性(Property)**:对象的一个命名特性。 - **方法(Method)**:作为对象属性的函数。 - **内置方法(Built-in Method)**:...

Global site tag (gtag.js) - Google Analytics