美文网首页js
关于原型的几个小知识

关于原型的几个小知识

作者: 捡了幸福的猪 | 来源:发表于2021-08-18 13:11 被阅读0次

1、 isPrototypeOf(): 测试一个对象是否存在于另一个对象的原型链上。
语法:

  prototypeObj.isPrototypeOf(object)

demo:

function Foo() {}
function Bar() {}
function Baz() {}

Bar.prototype = Object.create(Foo.prototype);
Baz.prototype = Object.create(Bar.prototype);

var baz = new Baz();

console.log(Baz.prototype.isPrototypeOf(baz)); // true
console.log(Bar.prototype.isPrototypeOf(baz)); // true
console.log(Foo.prototype.isPrototypeOf(baz)); // true
console.log(Object.prototype.isPrototypeOf(baz)); // true

说明Baz.prototype、Bar.prototype、Foo.prototype、Object.prototype 都在baz的原型链上

2、 getPrototypeOf: 方法返回指定对象的原型(内部[[Prototype]]属性的值)
语法:

Object.getPrototypeOf(object)

demo:

var proto = {};
var obj = Object.create(proto);
Object.getPrototypeOf(obj) === proto; // true

var reg = /a/;
Object.getPrototypeOf(reg) === RegExp.prototype; // true

Object.prototype.proto 已被废弃, 使用getPrototypeOf 代替

3、 instanceOf: 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上
语法:

object instanceof constructor

demo:

function C(){}
function D(){}

var o = new C();
o instanceof C; // true,因为 Object.getPrototypeOf(o) === C.prototype
o instanceof D; // false,因为 D.prototype 不在 o 的原型链上

o instanceof Object; // true,因为 Object.prototype.isPrototypeOf(o) 返回 true
C.prototype instanceof Object // true,同上

4、instanceof 使用 getPrototypeOf 与isPrototypeOf 实现:

function instance_of(L, R) { // L 表示实例,R 表示构造函数
    if (typeof L !== 'object' || L === null || typeof R !== 'function')
        return false;
    var O = R.prototype;
    do {
        L = Object.getPrototypeOf(L);   
        if (O === L)
             return true; 
    } while (L)
    return false
}

or

function instance_of(L, R) { // L 表示实例,R 表示构造函数
    return R.prototype.isPrototypeOf(L)
}

console.log(instance_of('', String))    // false
console.log(instance_of(new String(''), String))    // true
console.log(instance_of(new String(''), Object))    // true

5、遍历 原型上的属性or方法:
function 构造函数 可以使用Object.keys() or for..in 遍历:

function Test() {}
Test.prototype.testMethod = function(){}
const fnProto = Test.prototype

console.log(Object.keys(fnProto)) // ['testMethod']
for (let k in fnProto) {
    console.log(k)              //  'testMethod'
}

class 构造函数实现:

class TestClass{
    testMethod() {}
}
const classProto = TestClass.prototype

console.log(Object.keys(classProto))  // []
for (let k in classProto) {
    console.log(k)             // 不会执行
}

原因: class定义的方法是不可枚举的;
方法: 使用Object.getOwnPropertyNames, Object.getOwnPropertyNames返回一个数组包含对象自身拥有的可枚举和不可枚举属性。

class TestClass{
    testMethod() {}
}
const classProto = TestClass.prototype

console.log(Object.getOwnPropertyNames(classProto)) 

from 如何遍历class中的原型方法?

hi~ 今天开心了没~~

相关文章

  • 关于原型的几个小知识

    1、 isPrototypeOf(): 测试一个对象是否存在于另一个对象的原型链上。语法: demo: 说明Baz...

  • 原型、原型链、继承 | JavaScript

    原型与原型链 基本概念 关于原型和原型链的知识,首先来理解下以下几个知识点: 所有引用类型(Object、Arra...

  • 关于面膜的几个小知识

    ✨今天收到了我家顾客的反馈 她说用面膜以后,脸明显变白了,而且皱纹也减少了。只是敷在在手上,觉得黏糊糊的,洗不干净...

  • 关于刘禅的几个小知识

    1,刘禅,小名阿斗。据传刘禅之母甘夫人因夜梦仰吞北斗而怀孕,所以刘禅的小名叫做“阿斗”。刘禅因为投降魏国和...

  • 关于国旗的几个小知识。

    关于国旗的几个小知识,来自于兰州空军司令部短暂的工作 教官告诉我,国旗的高度要合适,如果有建筑物遮挡,就应该...

  • JS中的prototype

    本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,...

  • prototype

    本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,...

  • 原型与原型链相关

    前言 最近在整理原生JS的相关知识,发现关于原型和原型链涉及的知识对理解JS有很大的帮助。遂分享一下。 构造函数 ...

  • JS(五)原型与原型链

    在这篇文章里我们将要了解以下几个方面: 关于内存的那点事儿 关于垃圾回收那点事儿 包装对象 什么是原型 什么是原型...

  • 关于javascript的原型和原型链,看我就够了(一)

    关于js的原型和原型链,有人觉得这是很头疼的一块知识点,其实不然,它很基础,不信,往下看要了解原型和原型链,我们得...

网友评论

    本文标题:关于原型的几个小知识

    本文链接:https://www.haomeiwen.com/subject/sxjgbltx.html