关于js构造函数的继承(读了阮一峰老师的博客之后有些感想)
时间:2019-06-12
本文章向大家介绍关于js构造函数的继承(读了阮一峰老师的博客之后有些感想),主要包括关于js构造函数的继承(读了阮一峰老师的博客之后有些感想)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1 <--改代码样例是参考阮一峰老师博客的代码!--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Object_3</title> 7 </head> 8 <body> 9 <script> 10 function Animal(){ 11 this.species = '动物'; 12 } 13 14 function Cat(name, color){ 15 //Animal.apply(this, arguments); 16 this.name = name; 17 this.color = color; 18 } 19 20 //Cat.prototype.constructor = Animal;//用new构造函数的时候,用的是Cat的prototype,没有用constructor里面的 21 Cat.prototype = new Animal(); 22 //Cat.prototype.constructor = Cat;//这句话在new的时候并不会关系到对象的结构,它只是指向构造函数而已,最关键的是上面那句关于prototype的 23 var cat1 = new Cat('Hua', 'blue'); 24 console.log(cat1.name);//Hua 25 console.log(cat1.color);//blue 26 console.log(cat1.species);//动物 (该结果是加了21行或者15行才会有) 27 </script> 28 </body> 29 </html>
其实第22行 代码并不会影响你new关系到对象的结构,它只是指向构造函数而已,最关键的是上面那句关于prototype的
关于第21行 prototype
属性的作用就是让该函数所实例化的对象们都可以找到公用的属性和方法,
而21行 中执行哪行代码之后,prototype变成了一个对象,而这个对象里面有species属性,依据prototype的理解就知道所以此时cat1可以使用species的属性
或者如果想实现属性的继承,其实直接对Cat的prototype操作就行了
Cat.prototype.species = '动物'
文章参考http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html
原文地址:https://www.cnblogs.com/WildSky/p/11008895.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法