JS学习笔记之原型链和利用原型实现继承详解


Posted in Javascript onMay 29, 2019

本文实例讲述了JS学习笔记之原型链和利用原型实现继承。分享给大家供大家参考,具体如下:

原型链

原型链是一种关系,实例对象和原型对象之间的关系,关系是通过原型(__proto__)来联系的

实例对象中有__proto__,是对象,叫原型,不是标准的属性,浏览器使用,并且有的游览器不支持
构造函数中有prototype属性,也是对象,叫原型

注意 原型中的方法是可以互相访问的

实例代码

function Animal(name,age){
    this.name=name;
    thia.age=age;
   }

   //在原型中添加方法
   Animal.prototype.eat=function(){
    console.log("动物吃草")
    this.play()
   }
   Animal.prototype.play=function(){
    console.log("玩啥呢")
   }

原型的简单语法  

利用原型共享数据

第一种 写法

function Student(name,age,sex){
      this.name=name;
      this.age=age;
      this.sex=sex;
   }
  
   Student.prototype.height="188"
   Student.prototype.weight="55kg"
   Student.prototype.study=function(){
      console.log("好好学习i")
    }
  var stu=new Student("小红",20,"男")
  console.dir(stu)

结果

JS学习笔记之原型链和利用原型实现继承详解

第二种 写法

function Student(name,age,sex){
      this.name=name;
      this.age=age;
      this.sex=sex;
   }
  Student.prototype={
    height:"188",
    weight:"55kg",
    study:function(){
      console.log("好好学习i")
    }
   }
  var stu=new Student("小红",20,"男")
  console.dir(stu)

结果

JS学习笔记之原型链和利用原型实现继承详解

我们会发现 两种写法还是有差别的  ,第二种写法会导致constructor构造器属性消失 所以我们得手动修改构造器指向

最终代码

function Student(name,age,sex){
      this.name=name;
      this.age=age;
      this.sex=sex;
   }
  Student.prototype={
    constructor:Student,
    height:"188",
    weight:"55kg",
    study:function(){
      console.log("好好学习i")
    }
   }
  var stu=new Student("小红",20,"男")
  console.dir(stu)

好了,这回有了

JS学习笔记之原型链和利用原型实现继承详解

实例对象使用属性或方法的规则

实例对象使用的属性或方法,现在实例中查找,如果有则使用自身的属性或方法,
如果没有,则通过__proto__指向的原型对象 查找方法,找到则使用,
如果找不到则继续向__proto__寻找,直到未找到时报错

构造函数和实例对象和原型对象之间的关系

     构造函数可以实例化对象
     构造函数中有一个属性叫prototype,是构造函数的原型对象
     构造函数的原型对象(prototype)中有一个constructor 构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数
     实例对象的原型对象(__proto__) 指向的是该构造函数的原型对象(prototype)
     构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问

改变原型是否可以改变?

首先我们得知道构造函数和实例对象中的this 指向的是什么

这里我创建了自定义构造函数 Person ,并在内部输出了this 

并且在Person 的原型对象上添加了一个eat 方法,也输出了一个this,

接着我实例化了一个对象,并调用eat方法,

我们执行一下,查看结果如何

JS学习笔记之原型链和利用原型实现继承详解

输出结果

JS学习笔记之原型链和利用原型实现继承详解

由此得出

原型对象中方法中的this 就是实例对象

构造函数中的this就是实例对象

接下来我们尝试改变一下原型的指向

JS学习笔记之原型链和利用原型实现继承详解

这段代码中,首先我定义了一个Person自定义构造函数,并且在原型上添加了一个eat方法

定义了一个Student 函数,在原型上定义了一个sayHi方法,

然后我将 Student的原型指向 了一个 Person的实例对象

接着实例化一个Student,接着分别在stu 实例上 尝试着调用 eat方法 和 sayHi 方法,

运行结果

JS学习笔记之原型链和利用原型实现继承详解

到此我们可以确定,stu实例对象原型指向被下面这条代码改变了

Student.prototype=new Person(10);

总结

原型指向可以被改变的

实例对象的原型__proto__指向的是该对象所在的构造函数的原型对象

构造函数的原型对象(prototype)指向如果改变了,实例对象的原型(__proto__)指向也会发生改变

实例对象和原型对象之间的关系是通过__proto__ 原型来联系起来的,这个关系就是原型链

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

那么sayHi方法则会创建在 new Person(10) 这个实例对象上

原型最终指向了哪里

实例对象中的__proto__指向的是构造函数的prototype

以此代码为例

JS学习笔记之原型链和利用原型实现继承详解

测试一下

JS学习笔记之原型链和利用原型实现继承详解

JS学习笔记之原型链和利用原型实现继承详解

所以

per实例对象的__proto__ ---指向--->  Person.prototype的__proto__  ---指向--->  Object.prototype的__proto__ 是Null

查看了一下html的dom对象,这有很有意思的原型链

JS学习笔记之原型链和利用原型实现继承详解

这里祭出祖传JPG

JS学习笔记之原型链和利用原型实现继承详解

实现继承

小知识---->instanceof的判断方法:

从左边操作数的__proto__路线出发,从右边操作数的prototype出发,如果两条路线最终指向一个引用就是true了

1.利用 call 借用构造函数继承

优点:实现了继承属性,但值都不相同

缺点: 无法继承父级类别中原型上的方法

function Person(name,age,sex,weight){
  this.name=name;
  this.age=age;
  this.sex=sex;
  this.weight=weight;
}
Person.prototype.sayHi=function(){
  console.log("您好")
}

function Student(name,age,sex,weight,score){
  //将当前实例对象传入Person 借过来使用一次来达到继承效果
  Person.call(this,name,age,sex,weight);
  this.score=score;
}

var stu1=new Student("小明",10,"男","10kg","100")

2.  prototype 实现继承

利用prototype,将Student 的prototype 指向 Person 来达到继承效果,

优点:继承了父级原型上的方法

缺点:   实例化多个Student 都必须共用相同的name 和 age 

Student.prototype.constructor=Student

注意:   使用原型继承时,需要将构造器的指向更改回正确的指向

function Person(name,age){
    this.name=name;
    this.age=age;
   }

   Person.prototype.eat=function(){
    console.log("Person 吃饭")
   }

   function Student(num,score){
    this.num=num
    this.score=score
   }
   //继承
  Student.prototype=new Person("小红",10)
  Student.prototype.constructor=Student

  var stu =new Student(2016002288,80)

  stu.eat()//Person 吃饭

3.组合继承

组合继承其实就是结合了上述的两种方法来实现继承,拥有两种方法的优点

function Person(name,age,sex){
    this.name=name;
    this.age=age;
    this.sex=sex;
   }
   Person.prototype.sayHi=function(){
    console.log("你好")
   }

   function Student(name,age,sex,score){
    //借用构造函数
    Person.call(this,name,age,sex)
    this.score=score
   }

   // 改变了原型指向
   Student.prototype=new Person();//不传值
   Student.prototype.eat=function(){
    console.log("吃东西");
   }

   var stu=new Student("小黑",20,"男","100分")
   console.log(stu.name,stu.age,stu.sex,stu.score);
   stu.sayHi()//你好
   stu.eat()//吃东西

4.拷贝继承

类似于复制,把一个对象中的属性和方法直接复制到另一个对象中

function Person(){
  }

  Person.prototype.name="小红"
  Person.prototype.age=18

  function Student(){
  }
  
  var p=Person.prototype;
  var s=Student.prototype;

  for(key in p){
    s[key]=p[key]
  }

  console.dir(Student)

console

JS学习笔记之原型链和利用原型实现继承详解

每次都要for in 好累 ,  可以进行优化封装一下

function extend(Child,Parent) {


var p = Parent.prototype;


var c = Child.prototype;



for (var i in p) {



c[i] = p[i];



}
    
    //这个属性直接指向父对象的prototype属性,可以直接调用父对象的方法,为了实现继承的完备性,纯属备用性质


c.par = p;


}

5. 直接继承prototype

优点 : 效率比较高

缺点 : 因为相当于是个传址过程 所以修改Student的属性 Person 的也会被更改 

function Person(){};

  Person.prototype.name="小红";
  Person.prototype.age=18;

  function Student(){};

  Student.prototype=Person.prototype;

  console.dir(Student);
  console.dir(Person);
  Student.prototype.age=25;

console

JS学习笔记之原型链和利用原型实现继承详解

6.利用空对象作中介实现继承

用这种方式修改 Student 的prototype 不会影响到 Person的prototype

function Person(){};
  Person.prototype.name="小红";
  Person.prototype.age=11;

  function Student(){};
  var F=function(){};
  F.prototype=Person.prototype;

  Student.prototype=new F();
  Student.prototype.constructor=Student;

  Student.prototype.age=25;

  console.dir(Person)
  console.dir(Student)

console

JS学习笔记之原型链和利用原型实现继承详解

封装一下

function extend(Child,Parent) {


var F = function(){};



F.prototype = Parent.prototype;



Child.prototype = new F();



Child.prototype.constructor = Child;



Child.par = Parent.prototype;


}

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js获取下拉列表的值和元素个数示例
May 07 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
微信小程序实用代码段(收藏版)
Dec 17 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 #Javascript
vue-cli3中vue.config.js配置教程详解
May 29 #Javascript
详解vue-cli3开发Chrome插件实践
May 29 #Javascript
vue里的data要用return返回的原因浅析
May 28 #Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 #Javascript
Javascript三种字符串连接方式及性能比较
May 28 #Javascript
vue+element实现表格新增、编辑、删除功能
May 28 #Javascript
You might like
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
jquery中获取元素的几种方式小结
2011/07/05 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
Python实现大文件排序的方法
2015/07/10 Python
不要用强制方法杀掉python线程
2017/02/26 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
python调用自定义函数的实例操作
2019/06/26 Python
python3 深浅copy对比详解
2019/08/12 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
HashMap和Hashtable的区别
2013/05/18 面试题
学校搬迁方案
2014/06/15 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
个人创业事迹材料
2014/12/30 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
2015年度保密工作总结
2015/04/24 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS