ES5的类

1.最简单的类

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

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

function Person(){
    this.name=‘张三‘;/*属性*/
    this.age=20;
    this.run=function(){
        alert(this.name+‘在运动‘);
    }
}
//原型链上面的属性会被多个实例共享  构造函数不会
Person.prototype.sex="男";
Person.prototype.work=function(){
    alert(this.name+‘在工作‘);
}
var p=new Person();
//alert(p.name);
//p.run();
p.work();

  

3.类里面的静态方法

function Person(){}
Person.getInfo=function(){
    alert(‘我是静态方法‘);
}
//调用静态方法
Person.getInfo();

  

4.es5里面的继承  对象冒充实现继承

function Person(){
     this.name=‘张三‘;/*属性*/
     this.age=20;
     this.run=function(){/*实例方法*/
         alert(this.name+‘在运动‘);
     }
 }
 Person.prototype.sex="男";
 Person.prototype.work=function(){
      alert(this.name+‘在工作‘);
}
//Web类  继承Person类  原型链+对象冒充的组合继承模式
function Web(){
    Person.call(this);/*对象冒充实现继承*/
}
var w=new Web();
//w.run();//对象冒充可以继承构造函数里面的属性和方法,故此处正常运行
w.work();//但是没法继承原型链上面的属性和方法,故此处会报错

  

5.es5里面的继承  原型链实现继承

function Person(){
    this.name=‘张三‘;/*属性*/
    this.age=20;
    this.run=function(){/*实例方法*/
        alert(this.name+‘在运动‘);
    }
}
Person.prototype.sex="男";
Person.prototype.work=function(){
     alert(this.name+‘在工作‘);
}
//Web类  继承Person类  原型链+对象冒充的组合继承模式
function Web(){}
Web.prototype=new Person();//原型链实现继承
var w=new Web();
//w.run();//原型链实现继承:可以继承构造函数里面的属性和方法,故此处正常运行
w.work();//也可以继承原型链上面的属性和方法,故此处正常运行

  

6.原型链实现继承的问题

function Person(name,age){
    this.name=name;  /*属性*/
    this.age=age;
    this.run=function(){  /*实例方法*/
        alert(this.name+‘在运动‘);
    }
}
function Web(name,age){}
Web.prototype=new Person();
var w=new Web(‘赵四‘,20);
w.run();//实例化子类的时候没法给父类传参,故此处会报错

  

7.原型链+对象冒充的组合继承模式

function Person(name,age){
    this.name=name;  /*属性*/
    this.age=age;
    this.run=function(){  /*实例方法*/
        alert(this.name+‘在运动‘);
    }
}
function Web(name,age){
    Person.call(this,name,age);//对象冒充继承  实例化子类可以给父类传参
}
Web.prototype=new Person();
var w=new Web(‘赵四‘,20);
w.run();//此处不会报错

  

8.原型链+对象冒充继承的另一种方式

function Person(name,age){
    this.name=name;  /*属性*/
    this.age=age;
    this.run=function(){  /*实例方法*/
        alert(this.name+‘在运动‘);
    }
}
function Web(name,age){
    Person.call(this,name,age);
}
Web.prototype=Person.prototype;
var w=new Web(‘赵四‘,20);
w.run();

原文地址:https://www.cnblogs.com/heweiquan/p/11380705.html

时间: 2024-11-04 15:25:19

ES5的类的相关文章

面向对象JS ES5/ES6 类的书写 继承的实现 new关键字执行 this指向 原型链

一 .什么是面向对象? 面向对象(Object Oriented),简写OO,是一种软件开发方法. 面向对象是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物. 面向对象的概念和应用已超越了程序设计和软件开发,扩展到如数据库系统.交互式界面.应用结构.应用平台.分布式系统.网络管理结构.CAD技术.人工智能等领域. 面向对象是相对于面向过程来讲的,面向对象方法,把相关的数据和方法组织为一个整体来看待,从更高的层次来进行系统建模,更贴近事物的自然运行模式. 编程范式 一般可以

编写简洁的 JavaScript 代码

作者:尹锋链接:https://www.zhihu.com/question/20635785/answer/223515216来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 避免使用 js 糟粕和鸡肋 这些年来,随着 HTML5 和 Node.js 的发展,JavaScript 在各个领域遍地开花,已经从"世界上最被误解的语言"变成了"世界上最流行的语言".但是由于历史原因,JavaScript 语言设计中还是有一些糟粕和鸡肋,比如

JavaScript - 收藏集 - 掘金

Angular 中的响应式编程 -- 浅淡 Rx 的流式思维 - 掘金第一节:初识Angular-CLI第二节:登录组件的构建第三节:建立一个待办事项应用第四节:进化!模块化你的应用第五节:多用户版本的待办事项应用第六节:使用第三方样式库及模块优化用第七节:给组件带来活力Rx--隐藏在 Angular 中的利剑Redux你的 A... Electron 深度实践总结 - 前端 - 掘金思维导图 前言: Electron 从最初发布到现在已经维护很长一段时间了,但是去年才开始慢慢升温.笔者个人恰好

js学习笔记04-ES6函数(箭头函数与this),class

箭头函数 让简短单行函数更容易编写和阅读的普通函数可以是函数声明或函数表达式,但是箭头函数始终是表达式普通函数(把名字转换为大写) const upperNames = ['Fish', 'RedHands', 'Sugarbeans'].map(function(name) { return name.toUpperCase(); }); 将函数转换为箭头函数,函数主体只有一个表达式,简写主体语法1)删掉关键字 function2)删掉圆括号3)删掉左右花括号4)删掉关键字 return5)删

面向对象1.7

查面向对象 面向对象复习 面向对象的三大特点:封装 继承 多态/重载 封装:减少代码冗余,提高代码的重复使用率. 继承:子类继承父类的属性. 多态: 现在学习的js是EcmaScript2014(ES5) 生成类靠构造函数,ecmascript2015(es6)用class生成类. constructor 构造器 浏览器给每个类(函数)天生赋予一个prototype的属性,这个属性是一个对象,里面有个constructor的属性,叫构造器,指向当前的类本身 console.log(Person.

原型、原型对象、构造函数、原型链理解

1. 基本概念: "原型属性"也可以叫做"原型"(prototype):所有函数都有prototype,我觉得可以理解为python中的类属性,不需要通过实例,直接用类(es5就是函数名)可以调用,下面列举了三种创建函数的方法,函数创建后都有prototype属性,prototype指向"原型对象". // 函数声明 function F1() { }; // 表达式定义 let F2 = function () { }; // 函数构造 let

那些年被吐槽的JavaScript代码风格你写过多少?老师傅来打通你的任督二脉!

现在写代码比以前好多了,代码的格式都有 eslint.prettier.babel(写新版语法) 这些来保证,然而,技术手段再高端都不能解决代码可读性(代码能否被未来的自己和同事看懂)的问题,因为这个问题只有人自己才能解决.我们写代码要写到下图中左边这样基本上就功德圆满了. (1)变量数量的定义 拒绝:滥用变量 let kpi = 4; // 定义好了之后再也没用过 function example() { var a = 1; var b = 2; var c = a+b; var d = c

ECMA6--面向对象

面向对象是一种思维:由实际数据映射到程序中 继承 封装 多态 编程语言的发展史: 汇编: 0 1 二进制,纸带打印,移植性差,难懂 C语言(之前有A语言,B语言过时) C++(写起来也很难) java / object-c / javascript 统称为高级开发语言 编程思维: 从面向过程编程思维--->面向对象编程思维(高级开发语言) 什么是面向过程.面向对象? 1.面相过程的编程思维:只关心数学逻辑 2.根据实际,创建对应的对象 :车 路: 将生活逻辑直接映射到程序中. [面向过程] va

ES6 Class语法学习

前言 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScript 6中引入了类的特性.本文将详细介绍ES6中的类 类的定义 [ES5的类] function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x +