javascript总结50:认识instanceof 与 原型链
1 instanceof:
1.1 普通使用下: 判断一个对象是否是某个构造函数的实例:
语法 : 对象 instanceof 函数 是则返回true,不是则返回false.
console.log(obj instanceof Object);
1.2 高级用法:
判断一个函数的原型对象,是否在实例对象的原型链上
1.3 案例如下:
var arr = [];
console.log(arr instanceof Array); //true
console.log(arr instanceof Object); //true
2 原型链
MDN文档是这样解释的:
2.1 .JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。
其中:
1 对象 调用.prototype属性,访问到原型对象.可对其操作.
2 原型对象 调用.constructor属性,访问到对象.
3 解释demo如下:
(下面举例以构造函数Person作为文档中的对象来解释).
function Person(){ }
Person.prototype.sayName = function(){
console.log(1);
} var zs = new Person();
zs.sayName();//
4 下图为关系示意图:
以父亲(构造函数原型对象) 母亲(构造函数) 儿子(实例对象zs)来解释其间的关系.
释义:
释义1 var zs = new Person();
构造函数Person(母亲)),创造了实例对象(儿子)zs.
释义2 Person.prototype.sayName
Person通过 Person.prototype访问到(父亲)"原型对象",并添加了函数sayName.
释义3 zs.sayName();//1
(儿子)zs可以访问到,父母两对象内的所有变量和方法.
释义4 Person.prototype.constructor.prototype.sayName
(父亲)"原型对象"通过.constructor,访问到构造函数Person(母亲).
2.2 . 原型对象也可能拥有原型,并从中继承方法和属性**,一层一层、以此类推**。
这种关系常被称为原型链 (prototype chain),它解释了为何一个对象会拥有定义在其他对象中的属性和方法。
关系如下图所示:
解释:
2.1 原型对象(父亲)本身,也可能作为儿子被创造出来. 即:原型对象(父亲)上面也有它的父亲母亲,去继承他们的属性方法去使用.
2.2 通过这一层层的关系,从**实例对象 ~ null **构成了一个原型链.
3 .原型链使用:
3.1 根据原型链特有的规则,我们通常在对象内添加公共属性;原型对象内添加私有属性.
4 对象查找属性的规则:
先在自己身上找属性,如果有,就直接返回,如果没有,就顺着原型链往上找
javascript总结50:认识instanceof 与 原型链的更多相关文章
- JS学习笔记——JavaScript继承的6种方法(原型链、借用构造函数、组合、原型式、寄生式、寄生组合式)
JavaScript继承的6种方法 1,原型链继承 2,借用构造函数继承 3,组合继承(原型+借用构造) 4,原型式继承 5,寄生式继承 6,寄生组合式继承 1.原型链继承. <script t ...
- JavaScript学习总结(四)——this、原型链、javascript面向对象
一.this 在JavaScript中this表示:谁调用当前函数this就指向谁,不知道调用者时this指向window. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是 ...
- javascript类继承系列二(原型链)
原型链是采用最主要的继承方式,原理:每一个类(构造器,js中的function)都有一个原型属性(prototype)指向一个原型对象,原型对象有一个构造器(constructor),它又指回到fun ...
- 玩转JavaScript OOP[3]——彻底理解继承和原型链
概述 上一篇我们介绍了通过构造函数和原型可以实现JavaScript中的“类”,由于构造函数和函数的原型都是对象,所以JavaScript的“类”本质上也是对象.这一篇我们将介绍JavaScript中 ...
- JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承
说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象J ...
- JavaScript提高篇之面向对象之单利模式工厂模型构造函数原型链模式
1.单例模式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- JavaScript原型链及继承
在JavaScript中,所有的东西都是对象,但是JavaScript中的面向对象并不是面向类,而是面向原型的,这是与C++.Java等面向对象语言的区别,比较容易混淆,因此把我自己学习的过程记录下来 ...
- 理解 JavaScript 对象原型、原型链如何工作、如何向 prototype 属性添加新的方法。
JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板.从原型继承方法和属性.原型对象也可能拥有原型, ...
- 一张图搞懂 Javascript 中的原型链、prototype、__proto__的关系 转载加自己的总结
1. JavaScript内置对象 所谓的内置对象 指的是:JavaScript本身就自己有的对象 可以直接拿来就用.例如Array String 等等.JavaScript一共有12内置对象 ...
随机推荐
- JavaScript 数组some()和filter()
some方法 array1.some(callbackfn[, thisArg]) 对数组array1中的每个元素调用回调函数callbackfn,当回调函数返回true或者遍历完所有数组后,so ...
- jQuery中this与$(this)的区别实例
<p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a hre ...
- jquery Autocomplete函数
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 自己个儿写的循环分配txt中的内容
<?php header("Content-type:text/html;charset=utf8"); //当前日期 $now = time(); //作为程序是否执行的依 ...
- Firefox显示 您的链接不安全 的解决办法
Firefox浏览器,今天突然打开网页的时候提醒,“您的链接不安全”,于是网页怎么刷新都打不开.后来几经查询终于解决,下面告诉大家该如何解决这种情况. 百度经验:jingyan.baidu.com 工 ...
- Rhythmk 一步一步学 JAVA(11)Ibatis 环境配置
1.项目文件分布. 2.example1.java: package com.rhythmk.example1; import java.io.IOException; import java.io. ...
- leetcode503
public class Solution { public int[] NextGreaterElements(int[] nums) { int n = nums.Length; int[] ne ...
- README.md的编写
1.编辑README文件 大标题(一级标题):在文本下面加等于号,那么上方的文字就变成了大标题,等于号的个数无限制,但一定要大于0 大标题 ==== 中标题(二级标题):在文本下面加下划线,那么上方的 ...
- 浅谈JobExecutionContext&JobDataMap
- Perl 变量:哈希变量
Perl 哈希变量哈希是 key/value 对的集合.Perl中哈希变量以百分号 (%) 标记开始.访问哈希元素格式:${key}. 1.创建哈希创建哈希可以通过以下两种方式: 1.为每个 key ...