js的原型和原型链

最新推荐文章于 2024-04-26 16:47:03 发布

杰克2022

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量23

点赞数

文章标签： javascript 原型模式开发语言 ecmascript 前端

本文链接：https://blog.csdn.net/wyh0318/article/details/128483721

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js的原型和原型链</title>
</head>
<!-- js的原型和原型链 https://www.jianshu.com/p/be7c95714586 -->

<body>
    <script>
        /*
        原型的作用是用来存放公用的方法和属性，继承都是基于prototype
        1. prototype是对象
        2. 每个函数都有prototype，对象没有
        */
        /*
        函数有一个 prototype(函数的原型对象，是一个指针)
        函数的 prototype 的 constructor 指向当前函数
        prototype 用来存放公用的属性和方法
        prototype 可以扩展属性和方法
        */
        /*
        对象中有一个 __proto__(原型链) 指向函数的 prototype(原型)
        一个对象查找属性时，优先找实例属性，再是原型属性，再是父级原型属性，直到最终的父级
        不要在 __proto__ 上修改原型
        */

        function Func() {
            this.name = "jieke";
            console.log(this);
        }

        console.log(Func.prototype);
        console.log(Func.prototype.constructor);
        console.log(Func.prototype.constructor == Func); // true

        Func.prototype.age = "20";
        var funcInstance = new Func();
        funcInstance.sex = "man";
        console.log(funcInstance.hasOwnProperty("name")) // true // hasOwnProperty 判断是否是实例(自有)属性
        console.log(funcInstance.hasOwnProperty("age")) // false
        console.log(funcInstance.hasOwnProperty("sex")) // true
        console.log(funcInstance.__proto__); // 指向原型
        console.log(funcInstance.constructor == Func); // true
        console.log(funcInstance.__proto__ == Func.prototype); // true
        console.log(funcInstance.__proto__.constructor == Func); // true
        console.log(funcInstance instanceof Func); // true，判断某个实例是否属于哪种类型
        console.log(Object.getPrototypeOf(funcInstance) === Func.prototype); // true
    </script>

    <script>
        function A() { }
        function B() { }
        B.prototype = new A();
        var bInstance = new B();
        console.log(bInstance instanceof A); // true
        console.log(bInstance instanceof B); // true

        debugger;
        B.prototype = Object.assign({}, new A());
        B.prototype.constructor = B;
        bInstance = new B();
        console.log(bInstance instanceof A); // false
        console.log(bInstance instanceof B); // true

        function displayParentPrototype(func) {
            // debugger;
            if (!func) {
                return;
            }
            if (!func.__proto__) {
                return;
            }

            console.log(func.prototype);
            console.log(func.__proto__);
            console.log("------------------------------------------\n");

            arguments.callee(func.__proto__);
        }

        debugger;
        displayParentPrototype(bInstance);
        displayParentPrototype(B);
    </script>
</body>

</html>

杰克2022

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的原型和原型链

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫