js 面向对象类
- 类的声明
- 继承的几种方法
类的声明
第一种
function car(){
this.name = 'name';
}
第二种。es6中新添加的
class car(){
constructor(){
this.name ='name';
}
}
继承的几种方法
1.构造函数实现继承
function Parent(){
this.name = 'parent';
}
Parent.prototype.toSay = function(){
console.log(this.name);
}
function Child(){
Parent.call(this);
this.name1 = 'child';
}
console.log(new Child())

原理:在子类中调用了父级的构造函数,并把上下文换成子类,只是部分继承
缺点:看到上面输出的就知道,父类的prototype上的方法继承不了
2、原型链继承
上面的方法父类的prototype的方法继承不了,就自然会想到把父类实例赋值给子类的prototype这样,因为Parent的实例的__proto__指向了Parent.prototype
function Parent(){
this.name='parent';
this.play = [1, 2, 3];
}
function Child(){
this.type="child";
}
Child.prototype = new Parent();
var c1 = new Child();
var c2= new Child();
c2.play.push(4);
console.log(c1.play, c2.play);
缺点:会改变原型链上的数值
优化组合方法一
function Parent(){
this.name= 'name';
this.play = [1, 2, 3];
}
function Child(){
Parent.call(this);
this.type = 'child'
}
Child.prototype = new Parent()
var c1= new Child();
var c2 = new Child();
c2.play.push(4);
console.log(c1.play, c2.play);
原理:这是上面两种方法的组合
缺点:父级的构造函数在子类实例的时候执行了两次
优化组合方法二
function Parent () {
this.name = 'parent';
this.play = [1, 2, 3];
}
function Child () {
Parent.call(this);
this.type = 'child';
}
Child.prototype = Parent.prototype;
var c1 = new Child();
var c2 = new Child();
console.log(c1 instanceof Child, c2 instanceof Parent);
console.log(c1.constructor);
原理:和上面的一种比较是不再实例Parent而是直接将Child.prototype指向Parent.prototype,这样parent原型链上有的方法,child也会有
缺点:子类的构造器是父类,而不是子类,因为他们共用了一个原型对象
完美的方法
function Parent(){
this.name = 'parent';
this.play=[1,2]
}
function Child(){
Parent.call(this)
this.type = 'child'
}
Child.prototype = Object.create(Parent.prototype)
Child.constructor = Child;
js 面向对象类的更多相关文章
- js面向对象--类式继承
//待研究//类式继承 //js中模拟类式继承的3个函数 //简单的辅助函数,让你可以将新函数绑定到对象的 prototype 上 Function.prototype.method = functi ...
- JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
- JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
- js面向对象设计之class类
class 相对 function 是后出来的,既然 class 出来了,显然是为了解决 function 在处理面向对象设计中的缺陷而来.下面通过对比,来看看 class 作为 ES6 中的重大升级 ...
- js面向对象设计之function类
本文仅探讨如何合理的使用 function 在 javascript中实现一个面向对象设计的类.总所周知,javascript 并不能实现一个真正意义上的类,比如 protect 比如 函数重载.下面 ...
- js面向对象(对象/类/工厂模式/构造函数/公有和原型)
https://www.cnblogs.com/sandraryan/ 什么是对象 js中一切都是对象(有行为和特征).js允许自定义对象,也提供了内建对象(string date math等) 对象 ...
- JS面向对象编程创建类的方式
js创建类的方式有几种,大致如下: 1,构造函数方式: function Car(parameters) { this.name = "objectboy"; } var cat1 ...
- JS面向对象的类 实例化与继承
JS中 类的声明有两种形式: // 类的声明 function Animal() { this.name = 'name' } // ES6中的class声明 class Animal2 { cons ...
- JS面向对象(2) -- this的使用,对象之间的赋值,for...in语句,delete使用,成员方法,json对象的使用,prototype的使用,原型继承与原型链
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
随机推荐
- 尝试 zabbix 小记
server : Ubuntu 16.04 zabbix: 2.2.23源码包 安装 gcc,curl,make,snmp 软件和zabbix依赖一些php 扩展包 sudo apt-get inst ...
- vs2013x64&&qt5.7.1编译osg3.4.0&&osgEarth2.7
此文仅备忘: 1.安装VS2013_Cn_Ult 2.安装qt-opensource-windows-x86-msvc2013_64-5.7.1 设置环境变量QTDIR,并将其bin加入到path中. ...
- 2016.8.15上午纪中初中部NOIP普及组比赛
2016.8.15上午纪中初中部NOIP普及组比赛 链接:https://jzoj.net/junior/#contest/home/1333 这次比赛不怎么好,因为这套题目我并不是很擅长. 可同学们 ...
- day18 函数定义、参数;名称空间;全局变量及局部变量。
Python之路,Day6 = Python基础6 函数的定义 def func1(): # 定义一个函数,名字叫func1,括号中没有传入参数 print('hello word') # 这里是 f ...
- agc38C LCMs
https://atcoder.jp/contests/agc038/tasks/agc038_c 题意:给\(a_i\),求\(\sum_{i=1}^n\sum_{j=i+1}^nlcm(a_i,a ...
- 锁定文件失败 打不开磁盘“D:\vms\S1\CentOS 64 位.vmdk”或它所依赖的某个快照磁盘(强制关机后引起的问题)
电脑强制关机后,centos系统启动失败,报异常:锁定文件失败 打不开磁盘“D:\vms\S1\CentOS 64 位.vmdk”或它所依赖的某个快照磁盘.解决办法:进入D:\vms\S1目录,删除下 ...
- 控制变量行业年份回归时在STATA里怎么操作_stata 分年份回归
控制变量行业年份回归时在STATA里怎么操作_stata 分年份回归 我希望做一个多元回归,但需要控制年份和行业. (1)年份有7年2006-2012,听说STATA可以自动设置虚拟变量,请问命令是怎 ...
- ZOJ-1107-FatMouse and Cheese-dfs+记忆化搜索
FatMouse has stored some cheese in a city. The city can be considered as a square grid of dimension ...
- vue项目打包后资源相对引用路径的和背景图片路径问题
vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...
- SQLAlchemy的out join
我有一个app表,一个usergroup表,还有一个app_access_map表.用以实现对app访问的白名单控制. app和usergroup是多对多关系,app_access_map是中间表,不 ...