js

关于原型的几个小知识

2021-08-18  本文已影响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~ 今天开心了没~~

上一篇下一篇

猜你喜欢

热点阅读