原型(prototype


函数的 prototype 属性(图)

  • 每个函数都有一个prototype属性,它默认指向一个Object空对象(即称为:原型对象)
  • 原型对象中有一个属性constructor,它指向函数对象

给原型对象添加属性(一般都是添加方法)

  • 作用:函数的所有实例对象自动拥有原型中的属性(方法)

显式原型与隐式原型


  • 每个函数 function 都有一个prototype属性,即 显式原型
  • 每个实例对象都有一个__proto__,可称为隐式原型
  • 实例对象的隐式原型的值 === 其对应构造函数的显示原型的值
  • 内存结构(图)

  • 总结:

    • 函数的 prototype 属性:在定义函数时自动添加的,默认值是一个空的Object对象
    • 对象的__proto__属性:创建对象时自动添加的,默认值为构造函数的prototype属性值
    • 程序员能直接操作显示原型,但不能直接操作隐式原型(ES6之前)

原型链


原型链(图解)

  • 访问一个对象的属性时,

    • 先在自身属性中查找,找到返回
    • 如果自身属性中没有,再沿着__proto__这条链向上查找,找到返回
    • 如果最终没有找到,返回undefined
  • 原型链的别名:隐式原型连
  • 原型链的作用:查找对象的属性(方法)

构造函数/原型/实例对象的关系(图解)

var o1 = new Object()

var o2 = {}

构造函数/原型/实例对象的关系2(图解)

下面这个图需要仔细理解。

原型继承

  • 构造函数的实例对象自动拥有构造函数原型对象的属性(方法)
  • 利用的就是原型链

原型链——属性问题

  • 读取对象的属性值时:会自动到原型链中查找
  • 设置对象的属性值时:不会查找原型链,如果当前对象中没有此属性,直接添加此属性并设置其值
  • 方法一般定义在原型中,属性一般通过构造函数定义在对象本身上。

探索 instanceof


instanceof是如何判断的?

  • 表达式:A instanceof B
  • 如果B函数的显式原型对象在A对象的(隐式)原型链上,返回true,否则返回false

Function是通过new自己产生的实例

案例1

function Foo() {  }
var f1 = new Foo();
console.log(f1 instanceof Foo); // true
console.log(f1 instanceof Object); // true

案例2(重要)

console.log(Object instanceof Function); // true
console.log(Object instanceof Object); // true
console.log(Function instanceof Function); // true
console.log(Function instanceof Object); // true function Foo() {}
console.log(Object instanceof Foo); // false

注意:Function的显示原型和隐式原型是一样的。

面试题


测试题1

var A = function() { }
A.prototype.n = 1
var b = new A()
A.prototype = {
n: 2,
m: 3
}
var c = new A()
console.log(b.n, b.m, c.n, c.m) // 1 undefined 2 3

测试题2

var F = function(){};
Object.prototype.a = function(){
console.log('a()')
};
Function.prototype.b = function(){
console.log('b()')
};
var f = new F();
f.a() // a()
f.b() // 报错 f.b is not a function
F.a() // a()
F.b() // b()

对照下图理解:

javascript中的原型和原型链(二)的更多相关文章

  1. Javascript中的对象和原型(3)

    在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...

  2. Javascript中的对象和原型(三)(转载)

    在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...

  3. Javascript中的对象和原型(一)(转载)

    面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 要了解面向对象,首 ...

  4. javascript中的对象,原型,原型链和面向对象

    一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...

  5. JavaScript中的继承(原型链)

    一.原型链 ECMAScript中将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 实例1: function SupType() { this.pro ...

  6. 深入理解JavaScript中的继承:原型链篇

    一.何为原型链 原型是一个对象,当我调用一个对象的方法时,如果该方法没有在对象里面,就会从对象的原型去寻找.JavaScript就是通过层层的原型,形成原型链. 二.谁拥有原型 任何对象都可以有原型, ...

  7. JavaScript中的继承与原型链

    先看一个例子 function User(){} var u1 = new User(); console.log(u1.prototype);// undefined 使用对象实例无法访问到prot ...

  8. javascript中的构造函数和原型及原型链

    纯属个人理解,有错误的地方希望大牛指出,以免误人子弟 1.构造函数: 构造函数的作用 : 初始化由new创建出来的对象    new 的作用: 创建对象(空对象) new 后面跟的是函数调用,使用ne ...

  9. Javascript中的对象和原型(二)(转载)

    上一篇中提到了JavaScript中对象的创建的一些基本操作,接下来讨论下继续讨论. 一 工厂模式 我们知道,要创建一个对象我们可以用如下代码: var user = new Object(); // ...

  10. JavaScript中的对象与原型—你不知道的JavaScript上卷读书笔记(四)

    一.对象 对象可以通过两种形式定义:声明(文字)形式和构造形式.即: var myObj = { key: value // ... }; 或: var myObj = new Object(); m ...

随机推荐

  1. pwd命令和修改PS1环境变量在bash行的显示

    一.pwd:显示当前所在的位置 语法 pwd [选项] ... 描述       打印当前工作目录的完整文件名. -L,--logical              从环境使用PWD,即使它包含符号链 ...

  2. SSM和Spring Boot常用配置比较

    一.Dao层相关 1.Mysql相关: 1.1配置DataSource连接池: (1)SSM配置: <!-- 加密后配置自己写的解析文件 --> <bean class=" ...

  3. iview发布到IIS 路由问题

    <?xml version="1.0" encoding="UTF-8"?> <configuration> <system.we ...

  4. 学习笔记--最近公共祖先(LCA)的几种求法

    前言: 给定一个有根树,若节点\(z\)是两节点\(x,y\)所有公共祖先深度最大的那一个,则称\(z\)是\(x,y\)的最近公共祖先(\(Least Common Ancestors\)),简称\ ...

  5. 深入理解hive基础学习

    Hive 是什么?  1.Hive 是基于 Hadoop处理结构化数据的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供类 SQL 查询功能. 2.Hive 利用 HDFS 存储数据 ...

  6. 06 Nginx

    1.检查linux上是否通过yum安装了nginx rpm -qi nginx 2.解决安装nginx所依赖包 yum install gcc patch libffi-devel python-de ...

  7. 转:spring中InitailizingBean接口的简单理解

    转自:https://www.cnblogs.com/wxgblogs/p/6849782.html spring中InitializingBean接口使用理解   InitializingBean接 ...

  8. ABAP常用函数归纳

    转至:http://blog.csdn.net/forever_crazy/article/details/17707745 获取当前逻辑系统标识:OWN_LOGICAL_SYSTEM_GET 一.日 ...

  9. json字符串与json对象的转换

    JSON(JavaScript Object Notation)格式是开发中较为常见的数据格式,优点是轻量,便于理解和解析生成.JSON对象是一个无序的键值对集合,以 { } 为开头和结尾,键与键之间 ...

  10. 【异常】org.apache.hadoop.hdfs.server.common.InconsistentFSStateException

    1 异常信息 - ::, INFO org.apache.hadoop.hdfs.server.namenode.FSNamesystem: Maximum size of an xattr: -- ...