02 # 手写 instanceof 的原理

简介: 02 # 手写 instanceof 的原理

instanceof 干什么的?

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

instanceof 可以判断一个对象是否属于某个类

<script>
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.sayHello = function () {
        console.log("hello kaimo");
    };
    // 寄生组合继承
    function Student(name, age, className) {
        // 继承 Person 私有属性
        Person.call(this, name, age);
        this.className = className;
    }
    // 继承 Person 公有属性:使用 `Object.create()` 来解决多次调用父类构造函数问题
    Student.prototype = Object.create(Person.prototype);
    // 由于修改了构造器 `Student.prototype`,`Student.prototype.constructor` 已经不是 Student
    // 为了避免误解,手动重设 `Student.prototype.constructor` 属性
    // 这样通过 new Student 创建的实例的 constructor 又可以正确取到 Student
    Student.prototype.constructor = Student;
    console.log(Student.prototype.constructor);
    let p1 = new Person("kaimo", 313);
    console.log("p1---->", p1 instanceof Person);
    let s = new Student("kaimo-s", 18, "手写课堂");
    console.log(s);
    s.sayHello();
    console.log("s--Student-->", s instanceof Student);
    console.log("s--Person-->", s instanceof Person);
</script>

手写 instanceof

<script>
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.sayHello = function () {
        console.log("hello kaimo");
    };
    function Student(name, age, className) {
        Person.call(this, name, age);
        this.className = className;
    }
    Student.prototype = Object.create(Person.prototype);
    Student.prototype.constructor = Student;
    // 使用 kaimoInstanceof 模拟 instanceof 运算符
    function kaimoInstanceof(className, obj) {
        let fp = className.prototype; // className 的原型对象
        let cp = obj.__proto__; // obj 是 className 实例的原型对象
        // cp 为 null 结束循环,Object.prototype.__proto__ = null
        while (cp) {
            if (fp === cp) {
                return true;
            }
            // 往原型链上继续找
            cp = cp.__proto__;
        }
        return false;
    }
    let p1 = new Person("kaimo", 313);
    console.log("p1---->", kaimoInstanceof(Person, p1));
    let s = new Student("kaimo-s", 18, "手写课堂");
    console.log(s);
    s.sayHello();
    console.log("s--Student-->", kaimoInstanceof(Student, s));
    console.log("s--Person-->", kaimoInstanceof(Person, s));
</script>

670f1c7719984a7f824777b61b7a1361.png


目录
相关文章
|
11月前
|
索引
源码分析系列教程(11) - 手写Map框架(基于LinkedList)
源码分析系列教程(11) - 手写Map框架(基于LinkedList)
28 0
|
11月前
|
前端开发
手写基础 promise
手写基础 promise
60 0
|
11月前
源码分析系列教程(12) - 手写Map框架(基于JDK1.7)
源码分析系列教程(12) - 手写Map框架(基于JDK1.7)
34 0
|
12月前
|
存储 前端开发
|
12月前
|
前端开发
Promise的用法&原理&手写实现-2
Promise的用法&原理&手写实现-2
37 1
|
19天前
|
XML 缓存 Java
手写Spring源码(简化版)
Spring包下的类、手写@ComponentScan注解、@Component注解、@Autowired注解、@Scope注解、手写BeanDefinition、BeanNameAware、InitializingBean、BeanPostProcessor 、手写AnnotationConfigApplicationContext
手写Spring源码(简化版)
|
4月前
|
存储 前端开发 API
技术笔记:Promise的原理探究及手写Promise
技术笔记:Promise的原理探究及手写Promise
22 0
|
12月前
01 # 手写 new 的原理
01 # 手写 new 的原理
40 0
|
5月前
|
索引
06 # 手写 map 方法
06 # 手写 map 方法
47 0
|
5月前
|
索引
10 # 手写 every 方法
10 # 手写 every 方法
40 0