ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

ES6入门(5)-- class

2021-11-06 13:05:57  阅读:129  来源: 互联网

标签:ES6 console log -- constructor Fun new class


class简介

ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。

class 的本质是 function。

它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。

创建class

  1. JavaScript 语言中,生成实例对象的传统方法是通过构造函数。
		function Fun() {
            this.a = 1;
            this.b = 2;
        }
        Fun.prototype.sum = function() {
            return this.a + this.b;
        }

        var f = new Fun();
        console.log(f.sum()); // 3

  1. 用 ES6 的class改写,就是下面这样
		class Fun {
            constructor() {
                this.a = 1;
                this.b = 2;
            }

            sum() {
                return this.a + this.b;
            }
        }
        const f = new Fun();
        console.log(f.sum());

constructor 方法

constructor()方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor()方法。

		class Fn{
		    constructor(){
		      console.log('我是constructor');
		    }
		}
		new Fn(); // 我是constructor

constructor()方法默认返回实例对象(即this),完全可以指定返回另外一个对象。

		class Test {
		    constructor(){
		        // 默认返回实例对象 this
		    }
		}
		console.log(new Test() instanceof Test); // true


		class Fn {
		    constructor(){
		        // 指定返回对象
		        return new Test();
		    }
		}
		console.log(new Fn() instanceof Fn); // false

get,set

在“类”的内部可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。

		class Cls {
            constructor() {
                //
            }

            get a() {
                console.log("取值");
            }
            set a(value) {
                console.log("存值");
            }
        }

        const fn = new Cls();
        fn.a; // 取值
        fn.a = 4; // 存值

静态方法

类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。

	 	class Fun {
            static sum() {
                return 1 + 3;
            }
        }
        console.log(Fun.sum()); // 4 
        
        const a = new Fun();
        console.log(a.sum()); // TypeError: a.sum is not a function

注意点

  1. 类必须使用new调用,否则会报错。这是它跟普通构造函数的一个主要区别,后者不用new也可以执行。
		class fn {
            constructor() {
                console.log(2);
            }
        }
        fn() // TypeError: Class constructor fn cannot be invoked without 'new'
  1. 严格模式

类和模块的内部,默认就是严格模式,所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中,就只有严格模式可用。考虑到未来所有的代码,其实都是运行在模块之中,所以 ES6 实际上把整个语言升级到了严格模式。

  1. 不存在提升

类不存在变量提升(hoist)。

		new Foo(); // ReferenceError: Cannot access 'Foo' before initialization
		
		class Foo {}

标签:ES6,console,log,--,constructor,Fun,new,class
来源: https://blog.csdn.net/qq_53489791/article/details/121175750

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有