JavaScript面向对象编程-对象的继承

最新推荐文章于 2022-05-13 16:04:16 发布
最新推荐文章于 2022-05-13 16:04:16 发布
阅读量105 收藏
点赞数
分类专栏： 网道js笔记 JavaScript基础 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18747089/article/details/115914332
版权

对象的继承：通过原型对象继承；基于class继承。

// 这里只介绍通过原型对象继承

原型对象的概述

构造函数的缺点

function Person(name, age) { // 所有实例对象都会生成name age 属性 和say方法
  this.name = name;
  this.age = age;
  this.say = function() {
    console.log("Hello world!");
  };
}

let per1 = new Person("中小余", 18);
let per2 = new Person("中小鱼", 17);
per1.say === per2.say; // false  同一个构造函数的多个实例之间无法共享属性，两个实例会生成两个同样的say方法，浪费系统资源，解决这个问题的方法就是“原型对象prototype”

prototype属性的作用

JavaScript 继承机制的设计思想就是，原型对象的所有属性和方法，都能被实例对象共享。也就是说，如果属性和方法定义在原型上，那么所有实例对象就能共享，不仅节省了内存，还体现了实例对象之间的联系。

原型对象的作用，就是定义所有实例对象共享的属性和方法。这也是它被称为原型对象的原因，而实例对象可以视作从原型对象衍生出来的子对象

- 每一个函数都有一个prototype属性，指向一个对象
	// 对于普通函数来说，该属性基本无用。但是，对于构造函数来说，生成实例的时候，该属性会自动成为实例对象的原型
    function Person(name, age) {
      this.name = name;
      this.age = age;
    }
    Person.prototype.say = function() {
      console.log("Hello world!");
    };

    let per1 = new Person("中小余", 18);
    let per2 = new Person("中小鱼", 17);
    per1.say === per2.say; //true
    per1.say(); //'Hello world!'
    per2.say(); //'Hello world!'

-  原型对象的属性不是实例对象自身的属性。只要修改原型对象，变动就立刻会体现在所有实例对象上。
	
	Person.prototype.say = function() {
      console.log("我是一只酸菜鱼，又酸又菜又多余!");
    };
    per1.say(); // '我是一只酸菜鱼，又酸又菜又多余!'
    per2.say(); //'我是一只酸菜鱼，又酸又菜又多余!'

- 如果实例对象自身就有某个属性或方法，它就不会再去原型对象寻找这个属性或方法。如果实例对象上没有某个属性和方法的时候，它会到原型对象上去寻找该属性或方法。
	
	function Person(name, age) {
      this.name = name;
      this.age = age;
    }
    Person.prototype.say = function() {
      console.log("Hello world!");
    };

    let per1 = new Person("中小余", 18);
    let per2 = new Person("中小鱼", 17);
    per1.say = function() {
      console.log("我是一只酸菜鱼，又酸又菜又多余");
    };
    per1.say(); // '我是一只酸菜鱼，又酸又菜又多余'  他自身有say方法
    per2.say(); // 'Hello world!' 他自身没有say方法 所以会去原型上找

原型链

  • 所有的对象都有自己的原型对象
    • ​ 一方面任何一个对象，都可以充当其它对象的原型
    • ​ 另一方面由于原型对象也是对象，所以它也有自己的原型，因此会形成一个“原型链”(对象到原型，再到原型的原型….)
      • 一层层往上追溯，所有对象的原型最终都可以追溯到Object.prototype，即Object构造函数的prototype属性。也就是说，所有对象都继承了Object.prototype的属性，这就是所有对象都有valueOf和toString方法的原因，因为这是从Object.prototype继承的。
      • Object.prototype也有自己的原型，它的原型是null， null没有任何的属性和方法，也没有自己的原型，因此原型链的尽头就是null。
      • Object.getPrototypeOf(对象名)：返回参数对象的原型

constructor属性

prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.constructor === Person;// true

constructor属性定义在prototype对象上面，意味着可以被所有实例对象继承

function Person(name, age) {
  this.name = name;
  this.age = age;
}
let per1 = new Person("中小鱼", 18);
per1.constructor === Person; // true
per1.constructor === Person.prototype.constructor; //true
per1.hasOwnProperty("constructor");//false

constructor属性的作用是，可以得知某个实例对象，到底是哪一个构造函数产生的。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
function Man(name, age) {
  this.name = name;
  this.age = age;
}
let per1 = new Person("中小鱼", 18);
per1.constructor === Person; // true
per1.constructor === Man; //false

有了constructor属性，就可以从一个实例对象新建另一个实例

function Person(name, age) {
  this.name = name;
  this.age = age;
}
let per1 = new Person("中小鱼", 18);
let per2 = new per1.constructor();

per2.constructor === Person; // true
per2 instanceof Person; //true

constructor属性表示原型对象与构造函数之间的关联关系，如果修改了原型对象，一般会同时修改constructor属性，防止引用的时候出错。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.constructor === Person; // true
Person.prototype = {
  say: function() {
    console.log("hello world!");
  }
};
Person.prototype.constructor === Person;// false  修改了原型对象但是没有改constructor


function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.constructor === Person; // true
Person.prototype = {
  constructor: Person,// 修改constructor的指向
  say: function() {
    console.log("hello world!");
  }
};
Person.prototype.constructor === Person; //true

/
// 另一种写法
function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.constructor === Person;//true
Person.prototype.say = function() {// 另一种写法：只在原型对象上添加方法
  console.log("hello world!");
};
Person.prototype.constructor === Person; //true

instanceof 运算符

- 返回一个布尔值 ，表示对象是否为某个构造函数的实例
    function Person(name, age) {
      this.name = name;
      this.age = age;
    }
    let ins = new Person();
    ins instanceof Person; // true

- 它会检查右边构造函数的原型对象(prototype)是否在左边对象的原型链上，因此还可以这么写
	
	Person.prototype.isPrototypeOf(ins); // true
	// isPrototypeOf()方法是 JavaScript 提供的原生方法，用于检查某个对象是否为另一个对象的原型

- 由于instanceof检查整个原型链，因此同一个实例对象，可能会对多个构造函数返回true
	 
    let ins = new Person();
    ins instanceof Person; // true
    ins instanceof Object; // true

- 由于任意对象都是Object的实例(除了null),除了null其他对象的instanceOf Object的运算结果都是true，
所以instanceof运算等你可以判断一个值是否为非null的对象
	ins instanceof Object;// true
	null instanceof Object; // false

- instanceof 判断失真的情况
	let obj = Object.create(null);
    typeof obj; //'object'
    obj instanceof Object; //false
	//instanceof的原理是检查右边构造函数的prototype属性，是否在左边对象的原型链上。 
	// 但左边对象的原型链上，只有null对象。这时，instanceof判断会失真。


- instanceof用来判断值的类型
	let arr = [1, 2];
    let obj = {};
    let str = "string";

    arr instanceof Array; // true
    obj instanceof Object; // true
    str instanceof String; //false  instanceof运算符只能用于对象，不适用原始类型的值
    undefined instanceof Object; // false
    null instanceof Object; // false  undefined和null，instanceof运算符总是返回false

- 可以解决调用构造函数时，忘记加new命令的问题
    function Fubar (foo, bar) {
      if (this instanceof Fubar) {
        this._foo = foo;
        this._bar = bar;
      } else {
        return new Fubar(foo, bar);
      }
    }

构造函数的继承

让一个构造函数继承另一个构造函数，分成两步实现：
	- 1.在子类的构造函数中，调用父类的构造函数
	- 2.让子类的原型指赂父类的原型，这样子类就可以继承父类原型
    
    function Parent() {
      this.x = 0;
      this.y = 0;
    }
    Parent.prototype.say = function(x, y) {
      this.x += x;
      this.y += y;
      console.log("Parent.say");
    };
    // 第一步：子类继承父类的实例
    function Sub() {
      Parent.call(this); //在子类的构造函数中，调用父类的构造函数
    }
    // 另一种写法
    function Sub() {
      this.legacy = Parent;
      this.legacy();
    }

    // 第二步：子类继承父类的原型
    Sub.prototype = Object.create(Parent.prototype);
    /* sub.prototype是子类的原型，要将它赋值为Object.create(Parent.prototype)；
    而不是直接赋值为 Parent.prototype，因为以这种方式赋值对sub.prototype做操作的话也会修改父的的原型
    */
    Sub.prototype.constructor = Sub; // 修改constructor属性的指向

    let ins = new Sub();
    ins instanceof Sub; // true
    ins instanceof Parent; //true
	ins.say(); //'Parent.say'

多重继承

JS中不允许一个对象同时继承多个对象，但是可以通过Mixin(混入)模式实现。

function Fun1() {
  this.name = "中小余";
}
function Fun2() {
  this.age = 18;
}
function Say() {
  Fun1.call(this);
  Fun2.call(this);
}
//继承fun1
Say.prototype = Object.create(Fun1.prototype);
//继承链上加入fun2
Object.assign(Say.prototype, Fun2.prototype);
//指定构造函数
Say.prototype.constructor = Say;

let talkAbout = new Say();
console.log(talkAbout.name + "就是" + talkAbout.age + "岁"); //'中小余就是18岁'

模块

基本的实现方法

- 模块是实现特定功能的一组属性和方法的封装
	let comp = new Object(
    	name:'中小余',
        age:18,
        say:function(){
        	//...
   		 },
         do:function(){
             // ...
         }
      
    );
comp.say();//调用对象的方法
// 这种方法会暴露所有模块成员，内部状态还可以被外部改写

还可以利用构造函数，封装私有变量

function Person() {
  this.buffer = [];
}
Person.prototype = {
  contructor: Person,
  say: function(val) {
    this.buffer.push(val);
  },
  toString: function() {
    return this.buffer.join("");
  }
};

let yu = new Person();
yu.say(1);
yu.buffer;//[1]
yu.toString();// '1'

yu.buffer = [3, 4, 5, 6, 7]; // 外部能改变私有变量
yu.say(1);
yu.toString();// '345671'

封装私有变量：立即执行函数

解决暴露私有成员的问题

 let person = (function(){
  let str0  = '小余要坚强鸭';
  let str1 = '小余好南';
  let fun1 = function(){
    console.log(str1)
  };
  let fun2 = function(){
    console.log(str0); 
  };
  return function(){
    this.fun1 = fun1;
    this.fun2 = fun2
  };
})()

let yu = new person();
yu.fun2(); // '小余要坚强鸭'
yu.str0 = '小余坚强';
yu.fun2(); // '小余要坚强鸭'  str0没有变改变

模块的放大模式

如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用“放大模式”（augmentation）。

var module1 = (function (mod) {
　//...
　return mod;
})(window.module1 || {});

输入全局变量

为了在模块内部调用全局变量，必须显式地将其他变量输入模块。

(function($, window, document) {

  function go(num) {
  }

  function handleEvents() {
  }

  function initialize() {
  }

  function dieCarouselDie() {
  }

  //attach to the global scope
  window.finalCarousel = {
    init : initialize,
    destroy : dieCarouselDie
  }

})( jQuery, window, document );
// finalCarousel对象输出到全局，对外暴露init和destroy接口，内部方法go、handleEvents、initialize、dieCarouselDie都是外部无法调用的
中小余
关注
专栏目录
JavaScript面向对象编程之继承
BruceYuj的博客
09-23 1395
背景知识 原型链 默认的原型 确定原型和实例的关系 谨慎地定义方法 原型链的问题 借用构造函数 1 传递参数 2 借用构造函数的问题 组合继承 原型式继承 寄生式继承 寄生组合式继承背景知识继承是OOP中非常有名的概念（但不是必要的条件）。基本上目前有两种继承方式，接口继承（Java的Interface）和实现继承。接口继承只继承函数签名，实现继承继承实际的方法。而JavaScript没有函数签名，
JavaScript面向对象——继承
又更新代码的博客
12-15 215
问题背景：有一个Person类，里面定义了Person的姓名以及更新姓名的方法，有一个Student类，里面定义了Student的年级以及更新年级的方法，请问如何让Student类继承Person类的属性和方法？ function Person(name) { this.name = name this.changeName = function(newName) { this.name = newName console.log(newName) }
ES5中原型、实例对象和构造函数的那些事
Sfh的博客
05-13 374
有些朋友学了很久的js，发现到头来对于实例对象和构造函数，以及它们的成员变量和原型链还是比较模糊，所以今天我们花点时间来一起总结一下它们之间的那些"爱恨情仇"吧 ES5： 在ES5中，往往我们声明一个构造函数都是通过首字母大写的方式来区分它是一个构造函数，下面我们直接通过一个笔试题来一起分析一下其中的知识点 function Person(age){ this.age = age; } Person.sing = function(){console.log('我会唱歌');} Person.proto
题5 选择instanceof Object的返回结果
m0_49330994的博客
07-06 1825
考察对instanceof的掌握 问： “abcd”instanceof Object返回结果是： a."abcd" b.true c.false d.String 解析： instanceof是Java的一个二元操作符，和=,<,>是同一类的比较运算符。由于它是由字母组成的，所以也是Java的保留关键字。它的作用是测试它左边的对象是否是它右边的类的实例，返回boolean类型的数据。 例...
JS 对象原型学习笔记function Person(name,age,sex) { this.name = name; this.age = age; this.sex =
javaEE_zero的博客
04-11 3534
JS原型学习笔记
原型与原型链
weixin_30856725的博客
04-26 67
今天看了github上面的某位大佬对原型与原型链的文章 讲解很透彻 文章下面贴地址 prototype 每个函数都有prototype属性,如下 这个函数的prototype到底是什么呢,是函数的原型吗? 其实,函数的prototype都会指向一个对象,这个对象 就是调用改构造函数而创建的实例的原型,也就是上图的a b的原型 什么是原型呢? 每一个JavaScript对象(null除外)在创建的...
JavaScript面向对象编程--继承.mht
09-03
JavaScript面向对象编程--继承.mht,JavaScript面向对象编程--继承.mht,JavaScript面向对象编程--继承.mht,JavaScript面向对象编程--继承.mht
浅谈JavaScript面向对象--继承
10-17
继承是面向对象编程（OOP）的核心概念之一，在JavaScript中实现继承有多种方法。继承可以理解为子类能够获取父类的属性和方法的机制。在JavaScript中，继承可以通过多种方式实现，其中ES5和ES6提供了不同的实现手段...
javascript 面向对象编程 万物皆对象
10-29
JavaScript是一种广泛应用于Web开发的脚本语言，虽然许多人熟悉其基本功能，如表单验证，但要成为精通的开发者，必须深入理解JavaScript的面向对象编程（OOP）概念。JavaScript的面向对象特性与Java或C#等语言有所...
Javascript面向对象编程.
03-26
在提供的资源中，《代码之美》PDF文件可能包含了关于编程实践和代码风格的指导，而《Javascript面向对象编程》PPT可能更具体地阐述了JavaScript OOP的细节和示例。学习这些材料将有助于深入理解JavaScript的面向对象...
再谈javascript面向对象编程
12-09
面向对象编程（Object-Oriented Programming，简称OOP）是JavaScript的核心特性之一，但理解JavaScript的OOP需要我们放下对C++或Java等语言中经典的类（class）和继承（inheritance）概念的固有认知。JavaScript采用...
JavaScript-数据类型转换、错误处理机制
HELLOWORLD!
03-21 639
JavaScript 是一种动态类型语言，变量没有类型限制，可以随时赋予任意值。 数据类型的转换 强制转换 强制转换主要指使用Number()、String()和Boolean()三个函数，手动将各种类型的值，分别转换成数字、字符串或者布尔值。 Number() Number函数，可以将任意类型的值转化成数值。 - 转换规则 //字符串 Number('324') // 324 Number('324abc') // NaN Number函数将字符串转换为数值，要比parseInt函数严格得多，只
JavaScript异步操作 -定时器 setTimeout setInterval
HELLOWORLD!
05-13 564
setTimeout() setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。 let timerId = setTimeout(func|code, delay); * 第一个参数func|code是将要推迟执行的函数名或一段代码 * 第二个参数delay是推迟执行的毫秒数,如果省略，则默认为0 * 还可以有更多的参数，但第三个参数开始将作为回调函数的参数 function fun() { co
面向对象编程-new命令
HELLOWORLD!
04-11 549
什么是对象 单个实物的抽象 是一个容器，封装了属性和方法，属性是对象的状态，方法是对象的行为。 构造函数 JS语言的对象体系，基础构造函数（constructor）和原型链（prototype）。 构造函数就是专门用来生成实例对象的函数，它就是对象的模板，描述实例对象的基本结构 。 为了与普通函数区分，构造函数的首字母通常大写 生成对象的时候 必须使用new命令 函数体内部使用了this关键字，代表了所要生成的对象实例 new命令 let Yu = function(val){ this.p
JavaScript标准库-Date对象
HELLOWORLD!
04-05 518
Date对象是 JavaScript 原生的时间库。它以国际标准时间（UTC）1970年1月1日00:00:00作为时间的零点，可以表示的时间范围是前后各1亿天（单位为毫秒）。 - 普通函数的用法 Date();// 'Mon Apr 05 2021 15:57:31 GMT+0800 (中国标准时间)' Date(2020,1,2);// 'Mon Apr 05 2021 15:57:31 GMT+0800 (中国标准时间)' // 不管有没有参数，直接调用Date总是返回当前时间 - 构造函数
浏览器模型-window对象
HELLOWORLD!
05-18 441
浏览器里面，window对象（注意，w为小写）指当前的浏览器窗口。它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属。一个变量如果未声明，那么默认就是顶层对象的属性。 name = '小鱼'; window.name;// 小鱼 window对象的属性 window.name window.name = 'a' // 只要浏览器窗口不关闭，这个属性是不会消失的。举例来说，访问a.com时，该页面的脚本设置了window.name，接下来在同一个窗口里面载入了b.com，新页面的脚本可以读
浏览器模型
HELLOWORLD!
05-15 339
1、JavaScript 是浏览器的内置脚本语言。也就是说，浏览器内置了 JavaScript 引擎，并且提供各种接口，让 JavaScript 脚本可以控制浏览器的各种功能。一旦网页内嵌了 JavaScript 脚本，浏览器加载网页，就会去执行脚本，从而达到操作浏览器的目的，实现网页的各种动态效果。 <script id="mydata" type="x-custom-data"> console.log('Hello World'); </script> /* type可以
JavaScript标准库- JSON对象
HELLOWORLD!
04-07 316
JSON: JavaScript Object Notation,是一种用于数据交换的文本格式. 复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。 原始类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN, Infinity, -Infinity和undefined）。 字符串必须使用双引号表示，不能使用单引号。 对象的键名必须放在双引号里面。 数组或对象最后一个成员的后面，不能加逗号。 JSON对象的两个静态方法 - JSON.stringify()
JavaScript标准库-Math对象
HELLOWORLD!
04-05 235
Math对象不是构造函数，不能生成实例，所有的属性和方法都必须在Math对象上调用。 静态属性 Math对象的静态属性，提供以下一些数学常数。 Math.E：常数e。 Math.LN2：2 的自然对数。 Math.LN10：10 的自然对数。 Math.LOG2E：以 2 为底的e的对数。 Math.LOG10E：以 10 为底的e的对数。 Math.PI：常数π。 Math.SQRT1_2：0.5 的平方根。 Math.SQRT2：2 的平方根。 静态方法 Math对象提供以下一些静态方法。 Mat
JavaScript面向对象编程：继承操作深度解析
"本文深入讲解了JavaScript面向对象编程中的继承操作，包括构造函数绑定、原型模式等五种方法。通过实例展示了如何使‘猫’对象继承‘动物’对象的特性，帮助读者理解JavaScript中的继承机制。" 在JavaScript的面向...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

中小余

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值