资讯专栏INFORMATION COLUMN

JS原型链

wwolf / 2153人阅读

摘要:指向原型对象的构造函数二原型链什么是原型链原型链就是实例对象和原型对象之间的关系,他们使用来关联。改变指向实现继承创建类创建原型对象每天坚持锻炼创建构造函数函数就是改变执行代码片段中指向。

一. JS原型的简单理解 1.1 prototype
   prototype:是一个函数的属性,每个函数中都会有一个prototype属性,这个属性是一个指针,指向一个对象。在JavaScript中原型是一个prototype对象,用于表示类型之间的关系。
  
1.1.1 prototype定义

每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型属性。

       function Person() {}
      var p = new Person();

1.1.2 prototype 作用

原型对象包含实例共享的方法和属性,这个函数用作构造函数时调用,使用new操作符调用的时候,新创建的对象会从原型对象上得到同样的属性和方法。
原型作用之一:数据共享,节省内存空间
原型作用之二:为了实现继承

1.2 _proto_

proto:是一个对象拥有的内置属性,是js内部使用寻找原型链的属性,通过该属性可以允许使用实例对象直接访问原型。
注意,prototype是函数的内置属性,__proto__是对象的内置属性

        function Person() {}
     var p = new Person();
  // 以前不能直接使用 p直接访问对象原型
  // 现在有了 __proto__ 后
  // p.__proto__ 也可以直接访问对象原型
  // 那么 p.__proto__ === Person.prototype
1.2.1. _proto_ 有什么用?

可以访问原型

由于在开发中除非特殊要求, 不要使用实例去修改原型的成员. 因此属性开发时使用较少

调试过程中非常方便, 可以轻易的访问原型进行查看成员

1.3. constructor

constructor:属性返回对创建此对象的函数的引用。(指向原型对象的构造函数)

二. 原型链 2.1 什么是原型链?

原型链就是实例对象和原型对象之间的关系,他们使用__proto__来关联。
图解:

分析: a._proto_ ==Funciton构造函数的原型对象,其实原型对象也是一个实例化对象,既然是对象,那么他就是用Object来创建的, 既 var obj = new Object();所以Functionde的原型对象._proto_ = = Object构造函数的原型对象

2.2 原型对象是否可以改变

看下面的图文解读:

      function Person(name,age){
            this.name = name;
            this.age = age;
        };
        Person.prototype = {
                run:function(){
                    console.log("每天坚持锻炼");
                }
        };
        var person1 = new Person("Tom",20);
        person1.run();// 输出每天坚持锻炼身体

很显然,构造函数的原型对象是可以进行改变的,改变之后,当实例化对象时,它的原型对象就是构造函数新指向的对象。
三. 继承 3.1 什么是继承?

继承是一种关系,类(Class)与类之间的关系,JS中没有类,但是可以通过构造函数模拟类,然后通过原型来实现继承。继承是为了数据共享,js中的继承也是为了实现数据共享
eg:构建一个类是"人",他有姓名,性别,年龄等属性和方法,再构建一个学生类,他可以继承人的姓名,性别年龄等属性,并且他还有属于他自己的方法,比如:学习行为。看下面代码:

    //定义一个人的类别
        function Person (name,age,sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        Student.prototype = new Person("Tom",20,"man");
        //定义一个学生类别
        function  Student(){
                this.s =  function(){
                console.log("学生的天职就是学习");
            }
        }
        //实例化一个学生对象
        var student = new Student();
        student.s();// 学生的天职就是学习
        console.log(student.name);// Tom
        console.log(student.age);// 20
        console.log(student.sex);// man
分析:  实例化学生的对象继承了 Student对象的  方法,并且继承了  Person 对象的姓名,年龄,性别 属性。这就是继承。
3.2 实现继承的两种方式 3.2.1 改变原型对象的指向实现继承

看下面的图文详解

     // 创建一个动物类别
        function  Animal (weight,color) {
            this.weight = weight;
            this.color = color;
        };
        // 创建一个狗类
        function Dog(){
            this.bite = function (){
                console.log("咬人");
            };
        };
        Dog.prototype = new Animal("25kg","white");
        //创建一个二哈(狗的品种)类
        function Erha(){
            this.sayHello = function(){
                console.log("二哈是我们的好朋友,但是让人讨厌的是它会拆家!");
            }
        }
        Erha.prototype = new Dog();
        // 实例化一个对象
        var dog = new Erha();
        dog.bite();// 咬人
        dog.sayHello();// 二哈是我们的好朋友,但是让人讨厌的是它会拆家!
        console.log(dog.weight);// 25kg
        console.log(dog.color);//white

分析:首先创建一个Animal构造函数,里面有两个属性,然后在创建一个Dog构造函数,并改变Dog构造函数的原型对象 既     Dog.prototype = new  Animal("25kg","white");  最后创建Erha对象,再次改变Erha的原型对象,
Erha.prototype = new Dog(); 实例化一个对象,这时。这个实例化的对象就拥有了Animal的属性和方法,包括Dog的属性和方法,这就实现了继承,

缺陷: 如果实例化出来的对象,那么它的属性初始化值都是一样的。

3.2.2 改变 this 指向实现继承
     // 创建Person类
        function  Person(name,age,sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
        };
        // 创建原型对象
        Person.prototype.run = function(){
            console.log("每天坚持锻炼");
        }
        // 创建Studet 构造函数
        function Student(name,age,sex,score){
            // call函数就是改变执行代码片段中this指向。
            // this指的是当前函数
            Person.call(this,name,age,sex);
            this.score = score;
            this.study = function(){
                console.log("学生的天职就是学习");
            }
        };
        // 改变Student的原型对象,下面这句代码很重要,如果没有这句代码会出现不能继承父类原型对象的方法,这也是改变this指向继承的缺陷,所以我们可以采用两中模式共存的思想进行继承。
        Student.prototype = new Person();
        var stu1 = new Student("Tom",19,"man",80);
        stu1.run();// 每天坚持锻炼
        console.log(stu1.name);// Tom
        console.log(stu1.age);// 19
        console.log(stu1.sex);// man
        console.log(stu1.score);// 80

分析:其实这个很简单,只要你明白this的指向就好明白了,this的指向见我的另一篇文章Js面向对象第六小结。先分析这个,首先创建类我就不说了,直接说这个this指向问题,这里小编用了一个call()方法,call函数能够改变代码片段的this指向,本例中this指向为当前函数,Person(this,name,age,sex)===this.name = name; this.age = age;this.sex = sex;    这下是不是明白了

补充: apply 函数,这个函数也可以实现改变this指向来完成继承,见下面的代码:

       // 创建Person类
        function  Person(name,age,sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
        };
        // 创建原型对象
        Person.prototype.run = function(){
            console.log("每天坚持锻炼");
        }
        // 创建Studet 构造函数
        function Student(name,age,sex,score){
            // call函数就是改变执行代码片段中this指向。
            // this指的是当前函数
            Person.apply(this,[name,age,sex]);
            this.score = score;
            this.study = function(){
                console.log("学生的天职就是学习");
            }
        };
        // 改变Student的原型对象
        Student.prototype = new Person();
        var stu1 = new Student("Tom",19,"man",80);
        stu1.run();// 每天坚持锻炼
        console.log(stu1.name);// Tom
        console.log(stu1.age);// 19
        console.log(stu1.sex);// man
        console.log(stu1.score);// 80
这里只改变一句代码:  Person.apply(this,[name,age,sex]);
很明显可以看出,apply和call的区别就是 参数问题,apply的第二个参数为数组,而call为数据

补充: bind函数

bind的作用是将函数复制一份并且改变函数中的this, 并且返回这个函数。

见下面的代码分析:

    function Person(name,age){
            this.name = name;
            this.age = age;
            this.run = function(){
                console.log(this.age);
            }
        }
        var p1 = new Person("Tom",15);
        var p2 = new Person("Jack",19);
        p1.run.bind(p2)();// 19
分析:使用bind函数时会复制一份函数,本例子是把 function(){console.log(this.age)}  复制了一份,并改变了此时的this 为p2.
四. 总结

说实话,这节真的很难懂,我也是略懂一二而已,要想真正的明白,需要慢慢的沉淀,不知道正在学习前端的你针对这节内容有什么想法,可以留言告诉我,我们一起努力!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108114.html

相关文章

  • JS基础-原型原型真的不能一知半解

    摘要:原型链和对象的原型是对象实例和它的构造函数之间建立的链接,它的值是构造函数的。对象的原型根据上文提到的构造调用函数的时候会创建一个新对象,自动将的原型指向构造函数的对象。 showImg(https://segmentfault.com/img/remote/1460000020185197); JS的原型、原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清...

    changfeng1050 评论0 收藏0
  • 从实现角度分析js原型

    摘要:从实现角度分析原型链欢迎来我的博客阅读从实现角度分析原型链网上介绍原型链的优质文章已经有很多了,比如说作为补充,就让我们换个角度,从实现来分析一下吧本文假设你对原型链已经有所了解。 从实现角度分析js原型链 欢迎来我的博客阅读:《从实现角度分析js原型链》 网上介绍原型链的优质文章已经有很多了,比如说: https://github.com/mqyqingfeng/Blog/issu...

    CompileYouth 评论0 收藏0
  • 理解js原型与继承

    摘要:相当于在用原型继承编写复杂代码前理解原型继承模型十分重要。同时,还要清楚代码中原型链的长度,并在必要时结束原型链,以避免可能存在的性能问题。 js是一门动态语言,js没有类的概念,ES6 新增了class 关键字,但只是语法糖,JavaScript 仍旧是基于原型。 至于继承,js的继承与java这种传统的继承不一样.js是基于原型链的继承. 在javascript里面,每个对象都有一...

    wthee 评论0 收藏0
  • js原型 原型 原型的继承

    摘要:图片描述缺点是无法实现多继承可以在构造函数中,为实例添加实例属性。 对象的方法 Object.assign() 对象可以简写 ,如果 key 和 value 相等则可以简写 let name = xm; let age = 2; let obj = { name, age, fn(){ // 可以省略函数关键字和冒号: console.log(2...

    soasme 评论0 收藏0
  • js原型

    摘要:构造函数,实例,原型三者的关系如下图构造函数是构成整个原型链的关键,是他利用将原型传给了后代。因此,通过操纵构造函数的,就能够操纵原型链,从而对原型链进行自在的拼接。 要理解js的原型链主要就是理清楚以下三者的关系: 构造函数的protitype属性 对象的__proto__属性 对象的constructor属性 在js中,函数作为一等公民,它是一个对象,可以拥有自己的属性,可...

    NervosNetwork 评论0 收藏0
  • 【前端基础进阶】JS原型原型、对象详解

    摘要:二构造函数我们先复习一下构造函数的知识上面的例子中和都是的实例。这两个实例都有一个构造函数属性,该属性是一个指针指向。原型链其中是对象的实例。 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的。分为普通对象和函数对象,Object 、Function 是 JS 自带的函数对象。下面举例说明 var o1 = {}; var o2 =new Objec...

    explorer_ddf 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<