1. <script type="text/javascript">
  2. //------------------Person类
  3. //(Person)的构造函数
  4. function Person(name, sex) {
  5. this.name = name;
  6. this.sex = sex;
  7. }
  8. Person.prototype.showName = function() {
  9. console.log(this.name)
  10. };
  11. Person.prototype.showSex = function() {
  12. console.log(this.sex)
  13. };
  14. //var obj = new Person("tangsan","男");
  15. //obj.showName();
  16. //------------------Worker类
  17. //(Worker)的构造函数
  18. function Worker(name, sex, job) {
  19. console.log(this) //this->是new出来的Woker对象
  20. //构造函数伪装:
  21. //调用父级(Person)的构造函数 —— 1.为了继承属性
  22. Person.call(this, name, sex);
  23. this.job = job;
  24. }
  25. //原型链:
  26. //2.原型来继承父级原型
  27. Worker.prototype = Person.prototype;
  28. Worker.prototype.showjob = function() {
  29. console.log(this.job)
  30. }
  31. var Workerobj = new Worker("流川枫", "女", "篮球员");
  32. Workerobj.showjob();
  33. </script>

继承:

  1. 父类的构造函数。

  2. 子类继承属性。

  1. //(Worker)的构造函数
  2. function Worker(name, sex, job) {
  3. console.log(this) //this->是new出来的Woker对象
  4. //构造函数伪装:
  5. //调用父级(Person)的构造函数 —— 1.为了继承属性
  6. Person.call(this, name, sex);
  7. this.job = job;
  8. }
  1. 继承父类的方法。
  1. //原型链:
  2. //2.原型来继承父级原型
  3. Worker.prototype = Person.prototype;

子类影响父类的问题:

  1. console.log(Person.prototype.showjob);
  2. //输出:
  3. //function () {
  4. // console.log(this.job)
  5. // }

引用:

钥匙,同一块区域的地址

记住,js里面所有的对象全是引用。

  1. var arr1 = [1,2,3];
  2. var arr2 = arr1;//配钥匙
  3. arr2.push(4);
  4. console.log(arr2);//1234
  5. console.log(arr1);//1234

如果我不希望是一个引用,我希望我修改arr2的时候,arr1不受影响,怎么做呢?ex:

  1. var arr1 = [1,2,3];
  2. var arr2 = [];
  3. for(var i in arr1){//把arr1里的东西复制一份到arr2中。
  4. arr2[i]=arr1[i];
  5. }
  6. arr2.push(4);
  7. console.log(arr2);//1234
  8. console.log(arr1);//123

继承父类的方法的代码修改为:

  1. //原型链:
  2. //2.原型来继承父级原型
  3. //Worker.prototype = Person.prototype;
  4. for (var i in Person.prototype) {
  5. Worker.prototype[i] = Person.prototype[i];
  6. }

instanceof

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

type of :....的类型

  1. var arr1 = [1,2,3];
  2. console.log(arr1 instanceof Array);//true
  3. console.log(arr1 instanceof Object);//true 所有的类都是Object的一个子类,从object继承来的

JS高级 - 面向对象5(继承,引用)的更多相关文章

  1. 探讨 JS 的面向对象中继承的那些事

    最近学了 JS 的面向对象,这篇文章主要是探讨 JS 的面向对象中继承的那些事. JS中继承的特点: 1.子类继承父类: 2.子类可以用父类的方法和属性 3.子类的改变可以不影响父类 下面用一个例子来 ...

  2. js高级-面向对象继承

    一.工厂模式创建对象及优缺点 继承就是把公共的部分抽象出来作为父类,基类.吃饭,跑步等 var a = {}; //批量创建不方便,不能重复设置公共属性的代码 //工厂模式出现了,创建10个Cat对象 ...

  3. JS高级 - 面向对象1(this,Object ,工厂方式,new )

    面向对象三要素: 封装 继承 多态 1.this 详解,事件处理中this的本质 window this -- 函数属于谁 <script type="text/javascript& ...

  4. JS高级---逆推继承看原型

    逆推继承看原型 function F1(age) { this.age = age; } function F2(age) { this.age = age; } F2.prototype = new ...

  5. JS高级---面向对象的编程思想(贪吃蛇梳理)

    面向对象的编程思想(贪吃蛇梳理) 模拟贪吃蛇游戏,做的项目 地图: 宽,高,背景颜色,因为小蛇和食物都是相对于地图显示的, 这里小蛇和食物都是地图的子元素, 随机位置显示, 脱离文档流的, 地图也需要 ...

  6. JS高级 - 面向对象4(json方式面向对象)

    把方法包在一个Json里 var p1 = { name: "唐三", sex: "男", dreamdu: { URL: "www.dreamdu. ...

  7. JS高级 - 面向对象3(面向过程改写面向对象)

    改写: 1.前提:所有东西都在 onload 里 2.改写:不能有函数嵌套,可以有全局变量 onload --> 构造函数 全局变量 --> 属性 函数 --> 方法 4.改错: t ...

  8. JS高级 - 面向对象2(prototype定义)

    定义和用法 prototype 属性允许您向对象添加属性和方法 注意: Prototype 是全局属性,适用于所有的Javascript对象. 语法 object.prototype.name=val ...

  9. JS高级——面向对象方式解决tab栏切换问题

    注意事项 1.给li元素注册事件,函数里面的this指的li元素,那么我们可以在注册事件之前将Tab对象用that=this进行保存 2.使用沙箱模式,所以暴露给外面的变量使用的是window.tab ...

随机推荐

  1. Vue.js 开发环境的搭建

    1. cnpm install vue-cli(安装vue 脚手架) 2. vue init webpack my-project(my-project:自定义,取一个项目的名字,init 初始化一个 ...

  2. .NET MVC中的防CSRF攻击

    一.CSRF是什么? CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/session riding,缩写为:CSR ...

  3. centos7.5 python修复

    参考文章地址: 1.CentOS7修复python拯救yum: http://blog.51cto.com/welcomeweb/2132654 所有rpm包下载完成 wget http://mirr ...

  4. Http请求中Content-Type讲解以及在Spring MVC中的应用【转】

    完全引用自: http://blog.csdn.net/blueheart20/article/details/45174399#t1   此文讲得很清晰,赞! 引言: 在Http请求中,我们每天都在 ...

  5. jquery blockui 遮罩【转】

    参考 : http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/ blockUI.html blockUI.ht ...

  6. 有关Java内存溢出及内存消耗的小知识

    内存溢出原理: 我们知道,Java程序本身是不能直接在计算机上运行的,它需要依赖于硬件基础之上的操作系统和JVM(Java虚拟机). Java程序启动时JVM都会分配一个初始内存和最大内存给这个应用程 ...

  7. 9 Web开发——springmvc自动配置原理

    官方文档目录: https://docs.spring.io/spring-boot/docs/2.1.0.RELEASE/reference/htmlsingle/#boot-features-sp ...

  8. Bulma - 基于 Flexbox 的现代化的 CSS 框架

    Bulma 是一个基于 Flexbox 的现代化的 CSS 框架,设计的初衷就是移动优先(Mobile First),模块化设计,可以轻松用来实现各种简单或者复制的内容布局,浏览器支持:浏览器支持:C ...

  9. Hbase 集群安装(Hadoop 2.6.0 hbase0.99.2)

    一:说明 该安装是在hadoop集群安装后进行,详情可见上一篇博客虚拟机centos7系统下安装hadoop ha和yarn ha(详细) .其中涉及五台机器,两台master(机器名:master, ...

  10. Linux - 压缩

    tar  tar zxvpf gz.tar.gz # 解包tar.gz 不指定目录则全解压; -C 放到指定目录 包中的目录: -o 是强制覆盖: tar zcvpf /$path/gz.tar.gz ...