我们现在要做的一件事情是像其他语言的面向对象一下实现继承多态

具体要求如下:

一个 Father 构造函数,一个 Child 构造函数,其中改写 Father中的部分参数, new Child() 表示出一个新的child

        var Father = function (name) {
this.name = name
this.say = function () {
console.log('i am ' + name)
}
} var Child = function (name,age) {
this.age = age;
this.say = function () {
console.log("name:" + this.name + " and age:" + this.age);
}
}
Child.prototype = new Father()
var he = new Child('asd',)
     console.log(he.firstName) // qiao
        console.log(he.name)  
console.log(he.age)
he.say()

无法输出 name 是因为不能穿参数

    var Father = function (name) {
this.name = name
this.firstName = 'qiao'
this.say = function () {
console.log('i am ' + name)
}
}
var Child = function (name,age) {
this.tempMethod = Father
this.tempMethod(name)
this.age = age;
this.say = function () {
console.log("name:" + this.name + " and age:" + this.age);
}
} var he = new Child('asd',)
console.log(he.firstName) // qiao
console.log(he.name) // sad
console.log(he.age) //
he.say() // name:undefined and age:12

这样书写就可以继承name了

利用call可以这样书写

    var Child = function (name,age) {
Father.call(this,name)
this.age = age
this.say = function(){
console.log('i am ' + name +'and age '+ age )
}
}

利用apply的话会更加巧妙一点,不用管参数是什么

      var Child = function (name,age) {
Father.apply(this,arguments)
this.age = age
this.say = function(){
console.log('i am ' + name +'and age '+ age )
}
}

但是这样写虽然实现了继承,但是却没有利用原型进行继承,所以只是一种表面上的继承,实际上并没有原型上的联系,下面是如何利用原型进行继承

var Iphone = function () {
this.price =
} var IphoneX = function () {
this.say = function(){
console.log('i am more expensive');
}
}
IphoneX.prototype = Iphone.prototype;
var a = new IphoneX()

现在最新出的js class可以很优雅的实现这个

class Iphone {
constructor() {
this.price =
}
}
class IphoneX extends Iphone {
say() {
console.log('expensive');
}
}
var a = new IphoneX();
a.say()
console.log(a.price)

js 实现继承的更多相关文章

  1. JS对象继承篇

    JS对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person() ...

  2. js实现继承的5种方式 (笔记)

    js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...

  3. js实现继承的方式总结

    js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...

  4. 【09-23】js原型继承学习笔记

    js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...

  5. js实现继承的两种方式

    这是面试时面试官会经常问到问题: js的继承方式大致可分为两种:对象冒充和原型方式: 一.先说对象冒充,又可分为3种:临时属性方式.call().apply(): 1.临时属性方式: 当构造对象son ...

  6. js实现继承

    js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现 ...

  7. 浅谈JS的继承

    JS继承 继承是OO语言中最为人津津乐道的概念,许多OO语言都支持两种方式的继承:接口继承:实现继承. 接口继承:只继承方法签名. 实现继承:继承实际的方法. 由于ES里函数没有签名,所以在ES里面无 ...

  8. JS类继承常用方式发展史

    JS类继承常用方式发展史 涉及知识点 构造函数方式继承 1-继承单个对象 1.1 多步走初始版 1.2 多步走优化版 1.3 Object.create()方式 2-继承多个对象 2.1 遍历 Obj ...

  9. js实现继承的5种方式

    js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现 ...

  10. JS原型继承与类的继承

    我们先看JS类的继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

随机推荐

  1. mysql主从复制linux配置(二进制日志文件)

    安装mysql,两台机器一主(192.168.131.153),一从(192.168.131.154) 主机配置 修改主/etc/my.cnf文件 添加 #server_id=153 ###服务器id ...

  2. 【默默努力】h5-game-blockBreaker

    先放下游戏的效果,我不太会玩游戏 然后放下无私开源的作者大大的地址:https://github.com/yangyunhe369/h5-game-blockBreaker 这个游戏的话,我觉得应该是 ...

  3. WJMZBMR打osu! / Easy

    WJMZBMR打osu! / Easy 有一个由o,x,?组成的长度为n的序列,?等概率变为o,x,定义序列权值为连续o的长度o的平方之和,询问权值的期望, 解 注意到权值不是简单的累加关系,存在平方 ...

  4. 一.ES6的开发环境搭建

    前言: 现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成ES5的语法.Webpack是有自动编译转换能力的,除了Webpa ...

  5. JedisCluster API 整理

    windows版redis启动服务器命令:redis-server redis.windows.conf 图表来自菜鸟教程: 列表的操作命令 序号 命令及描述 1 BLPOP key1 [key2 ] ...

  6. threading.local在flask中的用法

    一.介绍 threading.local的作用: 多个线程修改同一个数据,复制多份变量给每个线程用,为每个线程开辟一块空间进行数据的存储,而每块空间内的数据也不会错乱. 二.不使用threading. ...

  7. iscroll 上拉加载和下拉刷新

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  8. iOS界面动画特效

    1.TableView的headView背景图片拉伸 - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup aft ...

  9. java线程池的使用学习

    目录 1. 线程池的创建 2. 线程池的运行规则 3. 线程池的关闭 4. 线程池的使用场合 5. 线程池大小的设置 6 实现举例 1. 线程池的创建 线程池的创建使用ThreadPoolExecut ...

  10. cmake 2.8.12在redhat 4.4下安装

    以前安过,忘了,今天记笔记这里