1.原型链继承

 // 1.原型链继承
/*
缺点:所有属性被共享,而且不能传递参数
*/
function Person(name,age){
this.name = name
this.age = age
}
Person.prototype.sayName = () =>{
console.log(this.name)
}
function Man(name){ }
Man.prototype = new Person()
Man.prototype.name = 'zhangsan'
var zhangsan = new Man('zhangsan')
console.log(zhangsan.name) //zhangsan

2.构造函数继承(经典继承)

// 构造函数继承(经典继承)
/*
优点:可以传递参数
缺点:所有方法都在构造函数内,每次创建对象都会创建对应的方法,大大浪费内存
*/
function Perent(name,age,sex){
this.name = name
this.age = age
this.sex = sex
this.sayName = function(){
console.log(this.name)
}
} function Child(name,age,sex){
Perent.call(this,name,age,sex)
}
let child = new Child('lisi' , 18, '男')
console.log(child) //Child { name: 'lisi', age: 18, sex: '男', sayName: [Function] }

3.组合方式继承(构造函数 + 原型链)

// 3.组合模式(构造函数 + 原型链)
/*
这种方式充分利用了原型链与构造函数各自的优点,是JS中最常用的继承方法 */
function Animal(name,age){
this.name = name
this.age = age
}
Animal.prototype.sayName = function () {
console.log(this.name)
}
function Cat(name,age,color){
Animal.call(this,name,age)
this.color = color
}
Cat.prototype = Animal.prototype //将Cat的原型指向Animal的原型
Cat.prototype.constructor = Cat //将Cat的构造函数指向Cat
let cat = new Cat('xiaobai',3,'white')
console.log(cat) //Cat { name: 'xiaobai', age: 3, color: 'white' }
cat.sayName() //xiaobai

4.es6方法继承

// 4.es6继承方法
class Per {
constructor(name){
this.name = name
}
sayName(){
console.log(this.name)
}
} class Son extends Per{
constructor(name,age){
super(name)
this.age = age
}
}
let son = new Son('zhangsan',18)
console.log(son) //Son { name: 'zhangsan', age: 18 }
son.sayName() //zhangsan

JS中常见的几种继承方法的更多相关文章

  1. JS中常见的几种报错类型

    1.SyntaxError(语法错误) 解析代码时发生的语法错误 var 1a; //Uncaught SyntaxError: Invalid or unexpected token 变量名错误 c ...

  2. JS 中深拷贝的几种实现方法

    JS 中深拷贝的几种实现方法1.使用递归的方式实现深拷贝 //使用递归的方式实现数组.对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是 ...

  3. js中this的四种使用方法

    0x00:js中this的四种调用模式 1,方法调用模式 2,函数调用模式 3,构造器调用模式 4,apply.call.bind调用模式 0x01:第一种:方法调用模式 (也就是用.调用的)this ...

  4. Python中class的三种继承方法

    class parent(object): def implicit(self): print("Parent implicit()") def override(self): p ...

  5. JS中常见的几种控制台台报错

    Error 控制台报错 EvalError 全局错误RangeError 引用错ReferenceError 参数错误SyntaxError 语法错误TypeError 类型错误URIError 编码 ...

  6. js oop中的三种继承方法

    JS OOP 中的三种继承方法: 很多读者关于js opp的继承比较模糊,本文总结了oop中的三种继承方法,以助于读者进行区分. <继承使用一个子类继承另一个父类,子类可以自动拥有父类的属性和方 ...

  7. js中常见的问题

    js中常见的问题 原文链接 1.js获取select标签选中的值 原生js var obj = document.getElementByIdx_x(”testSelect”); //定位id var ...

  8. Jquery中each的三种遍历方法

    Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(dat ...

  9. JavaScript:JavaScript中常见获取对象元素的方法

    介绍: javascript中常见的3种获取元素的方法,分别是通过元素ID.通过标签名字和通过类名字来获取 操作如下: 1.getElementById DOM提供了一个名为getElementByI ...

随机推荐

  1. Hibernate懒加载导致json数据对象传输异常的问题---(非常重要)

    1. 异常: [console_demo][WARN] [2016-12-15 19:49:35] org.springframework.web.servlet.mvc.support.Defaul ...

  2. Python--day30--网络基础

    单波: 查找mac:

  3. [转]vue - 前置工作 - 目录功能介绍

    一个DEMOS的完整目录(由于GWF问题,我就不一一打开网站一个个去搜索并且解释了)可以去关注:https://www.cnblogs.com/ye-hcj build build.js(本文来自ht ...

  4. vue样式加scoped后不能覆盖组件的原有样式解决方法

    <style scoped> </style> 为了vue页面样式模块化,不对全局造成污染,建议每个页面的style标签加上scoped,表示他的样式只属于当前的页面,父组件的 ...

  5. P1011 圆柱体的表面积

    题目描述 输入底面半径 \(r\) 和高 \(h\) ,输出圆柱体的表面积,保留 \(3\) 位小数. 输入格式 输入包含两个实数 \(r,h(1 \le r,h \le 1000)\) 且保证输入的 ...

  6. 【t098】符文之语

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 当小FF来到神庙时,神庙已经破败不堪了.但神庙的中央有一个光亮如新的石台.小FF走进石台, 发现石台上 ...

  7. java打包上传服务器的一些命令

    Maven下package打包成jar包和war包,都在target目录下 其中War包扔在tomcat的webapps目录下.随tomcat启动自行启动 运行jar包命令. nohup java - ...

  8. EJB实例

    两种管理机制: 无状态bean使用实例池技术管理bean 有状态bean使用激活(activation)管理bean 内存对象序列化到磁盘 磁盘反序列化到内存

  9. es6笔记 day2---字符串模板及字符串新增

    字符串连接案例 注意:引号变了,为键盘数字1旁边的飘花键 以前的老写法是在字符串中加入“+”号,给几个字符串给串起来,那种写法是要死人的. 现在只需加上一对``即可将字符串连接起来 --------- ...

  10. 2018-8-10-win10-uwp-按下等待按钮

    title author date CreateTime categories win10 uwp 按下等待按钮 lindexi 2018-08-10 19:16:50 +0800 2018-2-13 ...