原型链相关知识

最新推荐文章于 2022-05-29 16:50:41 发布

杏黄的三叶草

最新推荐文章于 2022-05-29 16:50:41 发布

阅读量97

点赞数

分类专栏： Web前端JavaScript

本文链接：https://blog.csdn.net/dwjdj/article/details/104435631

版权

Web前端JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

原型链:实例对象和原型对象之间的关系是通过__proto__原型来联系起来的,这个关系就是原型链
原型链以及原型之间的指向是否可以改变？
- 实例对象的原型__proto__指向的是该对象所在构造函数的原型对象prototype
- 构造函数的原型对象prototype指向如果改变了,实例对象的原型的指向也会发生改变

原型最终指向了哪里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function Person() {

    }
    Person.prototype.eat=function () {
        console.log("吃东西");
    };
    var per=new Person();
    console.dir(per);
    console.dir(Person);
    console.log(per.__proto__==Person.prototype);//true
    console.log(per.__proto__.__proto__==Person.prototype.__proto__);//true
    console.log(Person.prototype.__proto__==Object.prototype);//true
    console.log(Object.prototype.__proto__);//null
</script>
</body>
</html>

 /*
    * 实例对象中有一个__proto__原型
    * 构造函数中有一个prototype原型
    * prototype是对象，所以prototype中也有__proto__对象，那么指向哪里？
    * 实例对象中的__proto__指向的是构造函数的prototype
    * 所以，prototype这个对象中的__proto__也应该是指向某个构造函数的prototype
    * per实例对象的__proto__---->Person.prototype
    * Person.prototype的__proto__---->Object.prototype的__proto__也就是[null]
    * */

在这里插入图片描述

原型指向改变如何添加方法和访问

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //人的构造函数
    // function Person(age) {
    //     this.age=age;
    // }
    // //人的原型中添加方法
    // Person.prototype.eat=function () {
    //     console.log("人正在吃东西");
    // };
    // //学生构造函数
    // function Student(sex) {
    //     this.sex=sex;
    // }
    // //学生的原型中添加方法----先在原型中添加方法
    // Student.prototype.sayHi=function () {
    //     console.log("您好哦");
    // };
    // //改变了原型对象的指向
    // Student.prototype=new Person(10);
    // var stu=new Student("男");
    // stu.eat();
    // stu.sayHi();

    function Person(age) {
        this.age=age;
    }
    //人的原型中添加方法
    Person.prototype.eat=function () {
        console.log("人正在吃东西");
    };
    //学生构造函数
    function Student(sex) {
        this.sex=sex;
    }
    //先改变了原型对象的指向
    Student.prototype=new Person(10);
    //再在学生的原型中添加方法
    Student.prototype.sayHi=function () {
        console.log("您好哦");
    };
    var stu=new Student("男");
    stu.eat();
    stu.sayHi();
</script>
</body>
</html>

如果原型指向改变了，那么就应该在原型指向改变之后添加方法

实例对象中的属性和原型对象中的属性重名问题！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

    function Person(age,sex) {
        this.age=age;
        this.sex=sex;
    }
    Person.prototype.sex="女";
    var per=new Person(10,"男");
    per.sex="人";
    console.log(per.sex);//男
    console.dir(per);
    console.dir(Person);
    console.log(per.name);//undefined
</script>
</body>
</html>

 /*
    * 如果实例对象中的属性和原型对象中的属性发生重名，当实例对象访问这个属性时，
    * 应该先从实例对象中找，找到了就直接用，没有找到就去指向的原型对象中找,没有这个属性就是undefined
    * 因为js是一门动态类型的语言，对象没有什么，只要点了，那么这个对象就有这个东西；
    * 没有这个属性,只要对象.属性名字,对象就有这个属性了,但是,该属性没有赋值,所以,结果是:undefined
    *
    * 通过实例对象能否改变原型对象中属性的值？是不可以的,只能改变实例对象中属性的值
    * 如果非要改变,直接通过原型对象.属性=值;可以改变
    * */

一个很神奇的原型链

任何一个对象的最终指向都是null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="dv"></div>
<script>
    var divObj=document.getElementById("dv");
    console.dir(divObj);
    /*
    * divObj.__proto__---->HTMLDivElement.prototype
    * HTMLDivElement.prototype的__proto__---->HTMLElement.prototype
    * HTMLElement.prototype的__proto__---->Element.prototype
    * Element.prototype的__proto__---->Node.prototype
    * Node.prototype的__proto__---->EventTarget.prototype
    * EventTarget.prototype的__proto__---->Object.prototype
    * Object.prototype没有__proto__,所以,Object.prototype中的__proto__是null
    * */
</script>
</body>
</html>

杏黄的三叶草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原型链相关知识

原型链:实例对象和原型对象之间的关系是通过__proto__原型来联系起来的,这个关系就是原型链原型链以及原型之间的指向是否可以改变？实例对象的原型__proto__指向的是该对象所在构造函数的原型对象prototype构造函数的原型对象prototype指向如果改变了,实例对象的原型的指向也会发生改变原型最终指向了哪里<!DOCTYPE html><htm...
复制链接

扫一扫

专栏目录