JS中对象继承方式
JS对象继承方式
摘自《JavaScript的对象继承方式,有几种写法》,作者:peakedness
链接:https://my.oschina.net/u/3970421/blog/2872629
方式一:对象冒充
原理:构造函数使用this关键字给所有属性和方法赋值(即采用类声明的构造函数方式)。因为构造函数只是一个函数,所以可使Parent构造函数称为Children的方法,然后调用它。Children会收到Parent的构造函数中定义的属性和方法。
//父类构造函数
var Parent = function(name){
this.name = name;
this.sayHi = function(){
console.log("Hi" + this.name + ".");
}
}
var Children = function(name){
this.method = Parent;
this.method(name); //实现继承
delete this.method;
this.getName = function(){
console.log(this.name);
}
}
var P = new Parent("john");
var C = new Children("joe");
P.sayHi(); //Hi john
C.sayHi(); //Hi joe
C.getName(); //joe
方式二:原型链继承
原理:JS是一门基于原型的语言。在JS中prototype对象的任何属性和方法都被传递给那个类的所有实例。
//父类构造函数
var Parent = function(name){
this.name = name;
this.sayHi = function(){
console.log("Hi" + this.name + ".");
}
}
//子类构造函数
var Children = function(){};
Children.prototype = new Parent();
var P = new Parent();
var C = new Children();
P.sayHi();
C.sayHi();
注意:
调用Parent的构造函数,没有给它传递参数。这是原型链中的标准做法,要确保构造函数没有任何参数。
方式三:使用call或apply方法
原理:通过改变this指向实现继承。apply第二个参数必须是数组,call依次传入。
//父类构造函数
var Parent = function(name){
this.name = name;
this.sayHi = function(){
console.log("Hi" + this.name + ".");
}
};
//子类构造函数
var Children = function(name){
Parent.call(this,name);
this.getName = function(){
console.log(this.name);
}
};
var C = new Children("Joe");
C.sayHi(); //Hi john
C.getName(); //Joe
方式四:混合使用(推荐)
使用原型链就无法使用带参数的构造函数了
因此,在JS中创建类,最好使用构造函数定义属性,使用原型链定义方法。
//父类构造函数
var Parent = function(name){
this.name = name;
}
Parent.prototype.sayHi = function(){
console.log("Hi ! " + this.name + "!!!");
}
var P = new Parent("John");
P.sayHi(); //Hi John !!!
方式五:使用Object.create方法
Object.create方法会使用指定的原型对象及其属性去创建一个新的对象
//父类构造函数
var Parent = function(name){
this.name = name;
}
Parent.prototype.sayHi = function(){
console.log("Hi " + this.name + ".");
}
//子类构造函数
var Children = function(name,age){
this.age = age;
Parent.call(this,name); //属性不在prototype上
};
Children.prototype = Object.create(Parent.prototype);
Children.prototype.constructor = Children;
Children.prototype.getAge = function(){
console.log(this.age);
};
var P = new Parent("John");
var C = new Children("Joe",30);
P.sayHi(); //Hi John
C.sayHi(); //Hi Joe
C.getAge(); //30
注意:
当执行Children.prototype = Object.create(Parent.prototype)这个语句后,Children的constructor就被变为Parent,因此需要将Children.protype.constructor重新指定为Children本身。
constructor指向创建此对象的函数的引用。
方式六:extends关键字实现继承
class Paren{
constructor(name,age){
this.name = name;
this.age = age;
}
}
class Children extends Parent{
constructor(name,age,job){
super(name,age); //super必须在前,否则代码报错
this.job = job;
}
}
注意:
子类的constructor方法没有调用super之前,就使用this关键字会报错。原因是:子类Children的构造函数之中的super(),代表调用父类Parent的构造函数。
super虽然代表了父类Parent的构造函数,但是返回的是子类Children的实例,即super内部的this指的是Children,因此super()在这里相当于Parent.prototype.constructor.call(this);
JS中对象继承方式的更多相关文章
- JS中的继承方式总结
1. 原型链继承(又称类继承) Child.prototype = new Parent(); function Parent (name, age) { this.name = name; this ...
- js中对象继承的冒充方法
function Parent(name){ this.name = name; this.sayName = function(){ console.log(this.name); } } func ...
- js中常见继承方式
1.原型模式 function Father(){ this.property = true; } Father.prototype.getValue = function(){ return thi ...
- js中的继承和重载
js中有三种继承方式:一.通过原型(prototype)实现继承 二.借用构造函数式继承,可分为通过call()方法实现继承和通过apply()方法实现继承 仅仅通过原型继承我们可以发现在实例化子 ...
- js中实现继承的几种方式
首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...
- 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承
ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...
- js中对象转化成字符串、数字或布尔值的转化规则
js中对象可以转化成 字符串.数字.布尔值 一.对象转化成字符串: 规则: 1.如果对象有toString方法,则调用该方法,并返回相应的结果:(代码通常会执行到这,因为在所有对象中都有toStrin ...
- 【转载】js中对象的使用
原文链接:http://www.jb51.net/article/90256.htm[侵删] 简单记录javascript中对象的使用 一.创建对象 //创建一个空对象 var o={}; //创建一 ...
- JS中的继承(上)
JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之 ...
随机推荐
- vs文件属性(生成操作)各选项功能
右击项目里的文件,选择属性(F4)会有[生成操作]的选项. 它提供了14项选择,如图: 在这说一下常用的选项: 1.编译 编译用于c#代码类的操作,编译之后输出在该程序集的bin目录下.换句话说,代码 ...
- 【Android】6.0 添加Menu菜单组件、Intent启动活动、显式Intent、隐式Intent
1.0 在helloworld项目基础上创建活动SecondActivity: 2.0 其中main.xml: <?xml version="1.0" encoding=&q ...
- rem,em,px
http://pxtoem.com/ px,em,rem单位转换工具 px(Pixel)根据显示屏分辨率,固定大小 em,根据父元素大小进行改变 rem,根据html进行相对改变 em 1. bod ...
- centOs升级
因为军佬放弃制作Centos7的网络重装包,又Centos7的安装引导和6有较大区别所以,选择曲线救国(技术不行,只能这样乱搞)前文:Centos6.9一键重装包https://ppx.ink/net ...
- react里面stateless函数的默认参数
function fn({ children, params, dispatch, location}) { }
- <Android 基础(十八)> XLIFF
介绍 XLIFF ,XML Localization Interchange File Format,XML本地化数据交换格式. 实际使用 1.布局文件 activity_main.xml <? ...
- 转:如何利用已有的切片文件生成TPK
Tpk是ArcGIS 10.1即将推出的一种新的数据文件类型,主要是用于将切片文件打包形成离线地图包.Tpk可以在ArcGIS Runtime中作为切片底图被加载.在ArcGIS 10.1中Tpk的生 ...
- 面试题之------Java 反射机制
一.反射机制概述 Java 反射机制是在运行状态中,对于任意一个类,都能够获得这个类的所有属性和方法,对于任意一个对象都能够调用它的任意一个属性和方法.这种在运行时动态的获取信息以及动态调用对象的方法 ...
- sql字段合并与分组聚合
http://blog.csdn.net/cuixianlong/article/details/74024846 1 字段合并 原始数据如下:表名为Employee ID FirstName Las ...
- SQL Server ->> 重新创建Assembly和自动重建相关的数据库编程对象(存储过程,函数和触发器)
在SQL Server中,一旦一个Assembly被其他的数据库编程对象(存储过程,函数和触发器)引用了,这个Assembly就不能被删除.但是问题是,在SQL Server要更新一个Assembly ...