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();//1

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 对象查找属性的规则:

先在自己身上找属性,如果有,就直接返回,如果没有,就顺着原型链往上找

原文地址:https://www.cnblogs.com/autoXingJY/p/9053904.html

时间: 2024-10-08 01:19:00

javascript教程50:认识instanceof 与 原型链的相关文章

javascript基础修炼——一道十面埋伏的原型链面试题

javascript基础修炼--一道十面埋伏的原型链面试题 在基础面前,一切技巧都是浮云. 题目是这样的 要求写出控制台的输出. function Parent() { this.a = 1; this.b = [1, 2, this.a]; this.c = { demo: 5 }; this.show = function () { console.log(this.a , this.b , this.c.demo ); } } function Child() { this.a = 2;

JavaScript学习总结(四)——this、原型链、javascript面向对象

一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化,当然也可以使用call.apply修改this指向的对象.它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用 1.0.猜猜答案 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo

javascript的oop——&gt;&gt;&gt; [__proto__ 与 prototype/原型链/原型属性与原型方法/for-in循环]

  前  言  OOP  javascript的oop中的__proto__  与  prototype/原型链/原型属性与原型方法/for-in循环 1  __proto__  与  prototype/原型链   1.prototype(函数的原型):函数才有prototype.prototype是一个对象,指向了当前构造函数的引用地址呢.                       2.__proto__(对象的原型对象):所有对象都要__proto__属性.当用构造函数实例化(new)一

javascript类继承系列二(原型链)

原型链是采用最主要的继承方式,原理:每一个类(构造器,js中的function)都有一个原型属性(prototype)指向一个原型对象,原型对象有一个构造器(constructor),它又指回到function,是个循环引用,类的每个实例也有一个原型属性(代码无法访问,叫做_proto_),它跟构造器原型指向的是同一个对象,即同一个类的所有实例公用一个原型对象,要实现两个类型的继承,就是将一个类型的原型指向另一个类型的实例,而不再指定原来的默认的原型对象,这样就形成了原型链 子类可以通过原型链获

JavaScript基础知识十五(原型链批量设置公有属性)

function Fn(){ this.x = 100; } /* 1.把原来原型指向的地址赋值给我们的pro,现在它们 操作的是同一个内存空间*/ var pro = Fn.prototype; pro.getA =function(){}; pro.getB =function(){}; pro.getC =function(){}; /*2.重构原型的方式->自己新开辟一个堆内存,存储我们公有的. 属性和方法,把浏览器原来给Fn.prototype开辟的那个替换掉*/ Fn.prototy

javaScript教程50: 变量查找规则与词法作用域

作用域: 1 在es5.0中只有函数可以构成一个作用域 2 全局作用域: 整个js代码执行的环境 3 局部作用域: 函数可以构成一个局部作用域 4 全局变量: 在全局作用域中申明的变量 5 局部变量: 在函数构成的局部作用域中申明的变量 var a = 1; function fn(){ var a = 2; function fnA(){ a = 3; console.log(a); //3 } fnA(); console.log(a); // 3 } fn(); console.log(a

JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承

说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象JS基础讲解,工厂模式.构造函数模式.原型模式.混合模式.动态原型模式>,接下来讲一般通过那些方法完成JavaScript的继承. 原型链 JavaScript中实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实例即可,即“子类型.prototype = new 父类型();”,实现方法如下

玩转JavaScript OOP[3]&mdash;&mdash;彻底理解继承和原型链

概述 首先,我们简单描述一下继承的概念:当一个类和另一个类构成"is a kind of"关系时,这两个类就构成了继承关系.继承关系的双方分别是子类和基类,子类可以重用基类中的属性和方法. 上一篇我们介绍了通过构造函数和原型可以实现JavaScript中的"类",由于构造函数和原型是对象,所以JavaScript的"类"本质上也是对象.这一篇我们将介绍JavaScript中的一个重要概念原型链,以及如何经原型链实现JavaScript中的继承.

Javascript中的原型链

说到原型链,首先得说一下对象. 在javascript中我们经常说"一切皆为对象",而对象又是属性的集合,但并不是所有的类型都是对象,undefined, number, string, boolean都属于简单的值类型,不是对象.我们所说的可以作为对象的有:数组.函数.对象.Null.New Number(). 所以函数是一种对象,但是一切对象又是函数创建的,有人可能会说不对啊,例如下面这种的,obj是对象,但是并没有函数啊. var obj = { a: 10, b: 20 };