粗看ES6之面向对象写法



在es6以前,js没有类的概念,虽然有构造函数原型的方式用来做面向对向开发,但是对于书法并不是十分友好,而且对于继承实现也不是十分友好。
es6引入class constructor extends super等关键字简化了JS面向对象写法,以后可以跟后端说JS也终于是有类的一门语言了,哈哈。
ES6的面向对象写法如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>es6面向对象写法</title>
</head>
<body>
    <script>
        //js类写法
        class Test{
          constructor(a,b){
            this.attr0 = a;
            this.attr1 = b;
          }
          fn(){
            console.log(this.attr0,this.attr1)
          }
        }
        //初始化方法和以前构造函数原型方式一样,都是通过new关键字
        var testFn = new Test(1,2);
        testFn.fn();
    </script>
</body>
</html>

在线测试



es6通过extends super实现继承
示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>es6面向对象继承写法</title>
</head>
<body>
    <script>
        //js类写法,Test类
        class Parent{
          constructor(a,b){
            this.attr0 = a;
            this.attr1 = b;
          }
          fn(){
            console.log(this.attr0,this.attr1);
          }
        }

        //写一个继承自Parent的类
        class Child extends Parent{
            constructor(a,b,c){
              super(a,b);//实现继承parent上的方法&属性
              this.attr2 = c;
            }
            fn0(){
              console.log(this.attr2);
            }
        }

        //初始化方法和以前构造函数原型方式一样,都是通过new关键字
        var testFn = new Child(1,2,3);
        testFn.fn();
        testFn.fn0();
    </script>
</body>
</html>

在线测试

个人觉得自此jser真的可以愉快的进行面向对象编程了,666666,同时祝all新年快乐!!

原文地址:https://www.cnblogs.com/xwwin/p/8159338.html

时间: 2024-10-09 08:15:17

粗看ES6之面向对象写法的相关文章

粗看ES6之字符串

字符串新增特性 新增二个方法 - startsWith/endsWith 字符串模板 - 反单引号的应用 startsWith 判断字符串以是否以某某开头,返回一个布尔值 示例代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"&

javascript 面向对象写法的简单小例子,方面以后参考

面向对象写法的简单小例子,也即是一个小模板,方便以后拿来参考,如果有误,请各位大神多多指点.思想:主要给#box添加颜色和添加内容,一个方法是添加颜色,另一个方法是添加内容,然后编写的面向对象写法. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <st

ES6 的面向对象

JavaScript 语言中,生成实例对象的传统方法是通过构造函数. function Animal(name, age) { this.name = name; this.age = age; } Animal.prototype.showName = function () { console.log(this.name); console.log(this.age); } var a = new Animal('小黄', 5); a.showName(); 上面这种写法跟传统的面向对象语言

图片拖拽面向对象写法-1

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽之面向对象</title> <style> #box1{width: 100px;height: 100px;background-color: #0A246A; position: absolute;} </style> <s

面向对象写法的拖拽

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1{ width:100px; height:100px; background:red; po

js面向对象写法

//对象字面量写法 var fn = { name: 'hello world', fn1: function() { console.log(this.name); } }; fn.fn1(); //prototype原型写法 function Fn() { this.name = 'hello world'; this.fn1 = function() { console.log(this.name); }; Fn.prototype.fn2 = function() { console.l

看es6 字符串新方法有感

'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" 'na'.repeat(0) // "" 'x'.padStart(5, 'ab') // 'ababx''x'.padStart(4, 'ab') // 'abax'   上面是es6的新方法 es5 prototype可以写出 无聊写了点 String.prototype.repead=function(n){ var arr=n

ES6 简化对象写法

简化的对象写法 * 省略同名的属性值 * 省略方法的function <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq

图片拖拽面向对象写法-2

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style>     #box1{      width: 100px;      height: 100px;      background-color: #ffff00;      position: absolute;