美文网首页
es5中的类

es5中的类

作者: 北冥有咸鱼_ | 来源:发表于2020-05-12 11:14 被阅读0次

es5里的类(自己写)

function Person(){
  this.name = '张三';
  this.age = 20;
}
var p = new Person();
p.name //张三

构造函数和原型链里增加方法

function Person(){
  this.name = '张三'; //属性
  this.age = 20;
  this.run = function(){ //实例方法
    console.log('xxx')
  }
}
//通过原型链扩展属性
Person.prototype.sex = '女'
//通过原型链扩展实例方法
Person.prototype.work = function(){
  return '程序员'
}
var p = new Person();
p.work(); //程序员
//原型链上的属性会被多个实例共享,构造函数不会

实例方法必须通过newPerson才能调用

//定义静态方法
Person.getInfo = fucntion(){
  console.log('我是静态方法')
}
//调用
Person.getInfo();

es5中的继承

定义一个web类,继承Person类
两种方式1.原型链 2.对象冒充 3.组合

对象冒充
function Web(){
  Person.call(this) //对象冒充实现继承
//Web继承了Person
}
var w = new Web();
w.run(); //xxx
w.work(); //报错
//对象冒充可以继承构造函数里的方法,但是没法继承原型链上的属性和方法
原型链实现继承
Web.prototype = new Person(); //原型链实现继承
var w = new Web();
w.work(); //程序员
w.run(); //xxx
//原型链继承:既可以继承构造函数中的属性和方法,也可以继承原型链上的属性和方法
原型链实现继承的问题:

实例化子类的时候没法给父类传参

function Person(name,age){
  this.name = name; //属性
  this.age = age;
  this.run = function(){ //实例方法
    console.log(name+'在运动')
  }
}
Person.prototype.work = function(){
  console.log(this.name+'是程序员')
}
var p = new Person('李四',20);
p.run(); //李四在运动

//web继承person
function Web(name,age){
}
Web.prototype = new Person();
var w = new Web('张三',20)
w.run(); //undefined在运动
原型链+构造函数的组合继承模式
function Web(name,age){
  Person.call(this,name,age) //可以继承构造函数里的子类和方法
}
Web.prototype = new Person();
var w = new Web('张三',20)
w.run(); //张三在运动
w.work(); //张三是程序员

换种写法:

Web.prototype = Person.prototype
var w = new Web('张三',20)
w.run(); //张三在运动
w.work(); //张三是程序员

相关文章

  • class

    Class ES5中的类使用ES5中的类特点:使用function来进行模仿的 实例 & 类 & Object的关...

  • 类与继承

    ES5 类 ES5中并没有直接定义类的方法,需要我们手动来完成类的定义。 ES5中可以使用构造器函数来创建一个实例...

  • 九: ES6 Class 类

    前言 该部分为书籍 深入理解ES6 第九章(JS的类)笔记 ES5 中的仿类结构 在 ES5 中与类最接近的是: ...

  • es5中的类

    es5里的类(自己写) 构造函数和原型链里增加方法 实例方法必须通过newPerson才能调用 es5中的继承 定...

  • ES5中的类

    之前小编对于类和类的基本特征(所谓的封装、继承、多态)理解一直不是很到位,同时在实际项目应用中也用的比较少,今天小...

  • ES6中的类

    昨天小编更新了一下关于es5中的类的处理,也顺便将es5中类的知识和语法简单回顾一下,今天小编将es6中的与类相关...

  • day06-前端面试技巧-(面向对象)

    类与实例: 类的声明es5: es6中class的声明 生成实例实例类的对象(es5和es6的实例化方式是一样的)...

  • es6类

    es6类中对应es5的实现 alias = function|obj

  • ES6 的知识点学习笔记(2) - class 静态方法 继承

    在之前的 ES5 中, 是没有类 (class) 的概念的,例子: ES5 构造函数 Person ES6 cla...

  • ES6--(9)JS的类

    ES5 中的仿类结构 在ES5以前js并不存在类的概念,与类相接近的写法是,创建一个构造器,然后将方法指派到该...

网友评论

      本文标题:es5中的类

      本文链接:https://www.haomeiwen.com/subject/ditpnhtx.html