搜尋
首頁web前端前端問答es6的class是嚴格模式嗎
es6的class是嚴格模式嗎Oct 20, 2022 pm 03:55 PM
javascriptes6

是嚴格模式。 es6類別和模組的內部,預設就是嚴格模式,所以不需要使用「use strict」指定運作模式;只要程式碼寫在類別或模組之中,就只有嚴格模式可用。考慮到未來所有的程式碼,其實都是運行在模組之中,所以ES6實際上把整個語言升級到了嚴格模式。

es6的class是嚴格模式嗎

本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

es6的Class類別詳解

#class基本語法

JavaScript 語言中,產生實例物件的傳統方法是透過建構函式和原型的組合模式。ES6 提供了更接近傳統語言(java)的寫法,引入了Class(類別)這個概念,作為物件的模板。透過class關鍵字,可以定義類別。

class point{ 
   
	constructor(x,y){ 
   
        this.x=x;
        this.y=y;
    }
    play(){ 
   
        console.log("我会玩");
    }
}

ES6 的class可以看作只是一個語法糖,它的絕大部分功能,ES5 都可以做到,新的class寫法只是讓物件原型的寫法更加清晰、更像物件導向程式設計的文法而已。

註:「語法糖」:是由英國電腦科學家彼得·約翰·蘭達(Peter J. Landin)發明的術語,指電腦語言中添加的某種語法,這種語法對語言的功能並沒有影響,但更方便程式設計師使用。

ES6 的class與ES5寫法的幾個核心注意點: ES5 的建構子Point,對應 ES6 的Point類別的建構方法。 類別的所有方法都定義在類別的prototype屬性上面。 定義「類別」的方法的時候,前面不需要加上function這個關鍵字,直接把函數定義放進去了就可以了 方法之間不需要逗號分隔,加了會報錯 ES6的class使用方法與ES5的建構子一模一樣

//类的所有方法都定义在类的prototype属性上面。
class piont{ 
   
    constructor(){ 
   
		//
    }
    play(){ 
   
        
    }
}
//上述代码等价于
point.prototype={ 
   
    constructor() { 
   },
    play(){ 
   };
}

//在类的实例上面调用方法,其实就是调用原型上的方法。
class Ba{ 
   
	//
}
let b=new Ba();
b.constructor===Ba.prototype.constructor//true

另外:ES5 的建構子Point,對應 ES6 的Point類別的建構方法。

由於類別的方法都定義在prototype物件上面,所以類別的新方法可以加入prototype物件上面。 Object.assign方法可以很方便地一次向類別新增多個方法。

class ponit{ 
   
    constructor(){ 
   
        
    }
}
Object.assign(Point.prototype,{ 
   
	play(){ 
   };
})
//Class直接定义的方法之间不需要逗号分隔,加了会报错. 但是这里是Object.assign的方法格式, 这里面需要往Point.prototype里面添加的方法就需要符合对象的默认格式

類別的內部所有定義的方法,都是不可列舉的(non-enumerable)。透過Object.assign方法往類別的原型上新增的方法,constructor不可枚舉, 其他的可以枚舉

Class的基本語法之constructor

constructor方法是類別的預設方法,透過new指令產生物件實例時,自動呼叫該方法。一個類別必須有constructor方法,如果沒有明確定義,一個空的constructor方法會被預設為添加。

constructor方法預設回傳實例物件(即this),完全可以指定傳回另外一個物件 (得是在創造class時就定義設定的, 在創造完class後,透過Object.assign的方式是沒法改變建構子的回傳值的).

Class的基本語法之類別的調用方式

類別必須使用new調用,否則會報錯。這是它跟普通建構函式 ( 普通建構函式完全可以當做普通函式使用 ) 的一個主要區別,後者不用new也可以執行。

Class的基本語法之getter和setter

與ES5 一樣,在「類別」的內部可以使用get和set關鍵字,對某個屬性設定存值函數和取值函數,攔截該屬性的存取行為。

  class demo{ 
   
            constructor(age){ 
   
                this.age=agie;
                this._age=age;
            }
            get age(){ 
   
                return this._age;
            }
            set age(value){ 
   
                this._age=value;
                console.log("年龄"+value);
            }
        }
        let kevin=new demo(9);
        kevin.age=18;
        console.log(kevin.age);

Class的基本語法之類的屬性名稱

在上面程式碼中, Square類別的方法名稱getArea,是從表達式得到的。

Class的基本語法的特別注意點

(1)嚴格模式

類別和模組的內部,預設就是嚴格模式,所以不需要使用use strict指定運行模式。只要你的程式碼寫在類別或模組之中,就只有嚴格模式可用。考慮到未來所有的程式碼,其實都是運行在模組之中,所以 ES6 實際上把整個語言升級到了嚴格模式。

(2)不存在提升

new foo();
class foo{};

上面程式碼中,Foo類別使用在前,定義在後,這樣會報錯,因為ES6 不會把類別的宣告提升到程式碼頭部。

(3)name 屬性

class point{
}
point.name//point

由於本質上,ES6 的類別只是 ES5 的建構子的一層包裝,所以函數的許多特性都被Class繼承,包括name屬性。

(4)this 的指向

類別的方法內部如果含有this,它預設指向類別的實例。但是,必須非常小心,一旦單獨使用該方法,很可能會報錯。

printName方法中的this,默认指向Logger类的实例。但是,如果将这个方法提取出来单独使用,this会指向该方法运行时所在的环境(由于 class 内部是严格模式,所以 this 实际指向的是undefined),从而导致找不到print方法而报错。

解决办法:

一个比较简单的解决方法是,在构造方法中绑定this,这样就不会找不到print方法了。

另一种解决方法是使用箭头函数。箭头函数位于构造函数内部,它的定义生效的时候,是在构造函数执行的时候。这时,箭头函数所在的运行环境,肯定是实例对象,所以this会总是指向实例对象。

class Logger{ 
   
    constructor(){ 
   
        this.printName=this.printName.bind(this);
        //但是请注意bind之后返回的函数里面的this就永久锁死了问题:!!! !!! 坚决别用 
    }
}
//箭头函数
class Obj{ 
   
    constructor(){ 
   
        this.getThis=()=>this;
    }
}
let o=new Obj();
o.getThis()===o//true

Class的静态属性和方法

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

 class Person{ 
   
            static sum=0;
            constructor(){ 
   
                this.add();
            }
            add(){ 
   
                Person.sum++;
            }
        }
        let kaiwen=new Person();
        console.log("当前的聊天室人数为:"+Person.sum);
        //作用:当没有实例化的时候,我们可以通过静态的属性和方法去获取一些信息
 // 注意,如果静态方法包含this关键字,这个this指的是类,而不是实例。静态方法可以与非静态方法重名。

父类的静态方法,可以被子类继承静态方法也是可以从super对象上调用的。

 class Person{ 
   
            constructor(name){ 
   
                this.name=name;
                this.sex="男";
            }
        }
        class Student extends Person{ 
   
            constructor(name,age){ 
   
                super(name);
                this.age=age;
            }
        }
        let s=new Student("张三",11);
        console.log(s.name);
        console.log(s.age);
        console.log(s.sex);

Class的私有方法和私有属性

私有方法和私有属性:是只能在类的内部访问的方法和属性,外部不能访问。 这是常见需求,有利于代码的封装,但 ES6 不提供,只能通过变通方法模拟实现。

_bar方法前面的下划线,表示这是一个只限于内部使用的私有方法。但是,这种命名是不保险的,在类的外部,还是可以调用到这个方法

下面代码中的写法不仅可以写私有属性,还可以用来写私有方法

 class Cat{ 
   
            #eyes="眼睛";
            static pai(){ 
   
                console.log("凯文");
            }
            say(){ 
   
                Cat.pai();
                console.log("猫有一双大大的"+this.#eyes);
            }
        }
        let kate=new Cat();
        kate.say();

私有属性也可以设置 getter 和 setter 方法。

私有属性不限于从this引用,只要是在类的内部,实例也可以引用私有属性。

构造函数的新属性

ES6 为new命令引入了一个new.target属性,该属性一般用在构造函数之中,返回new命令作用于的那个构造函数。如果构造函数不是通过new命令调用的,new.target会返回undefined,因此这个属性可以用来确定构造函数是怎么调用的。

私有属性也可以设置 getter 和 setter 方法。

私有属性不限于从this引用,只要是在类的内部,实例也可以引用私有属性。

【相关推荐:javascript视频教程编程视频

以上是es6的class是嚴格模式嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
es6怎么判断是否为数组es6怎么判断是否为数组Apr 25, 2022 pm 06:43 PM

在es6中,可以利用“Array.isArray()”方法判断对象是否为数组,若判断的对象是数组,返回的结果是true,若判断对象不是数组,返回的结果是false,语法为“Array.isArray(需要检测的js对象)”。

es6中遍历跟迭代的区别是什么es6中遍历跟迭代的区别是什么Apr 26, 2022 pm 02:57 PM

es6中遍历跟迭代的区别是:遍历强调的是要把整个数据依次全部取出来,是访问数据结构的所有元素;而迭代虽然也是依次取出数据,但是并不保证取多少,也不保证把所有的数据取完,是遍历的一种形式。

es6中怎么判断两个对象是否相等es6中怎么判断两个对象是否相等Apr 19, 2022 pm 03:34 PM

在es6中,可用Object对象的is()方法来判断两个对象是否相等,该方法检测两个变量的值是否为同一个值,判断两个对象的引用地址是否一致,语法“Object.is(对象1,对象2)”;该方法会返回布尔值,若返回true则表示两个对象相等。

es6怎么将数字转为字符串es6怎么将数字转为字符串Apr 19, 2022 pm 06:38 PM

转换方法:1、利用“+”给数字拼接一个空字符,语法“数字+""”;2、使用String(),可把对象的值转换为字符串,语法“String(数字对象)”;3、用toString(),可返回数字的字符串表示,语法“数字.toString()”。

sort排序是es6中的吗sort排序是es6中的吗Apr 25, 2022 pm 03:30 PM

sort排序是es6中的;sort排序是es6中用于对数组的元素进行排序的方法,该方法默认不传参,按照字符编码顺序进行排序,排序顺序可以是字母或数字,并按升序或降序,语法为“array.sort(callback(a,b))”。

es6中assign的用法是什么es6中assign的用法是什么May 05, 2022 pm 02:25 PM

在es6中,assign用于对象的合并,可以将源对象的所有可枚举属性复制到目标对象;若目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性,语法为“Object.assign(...)”

es6怎么改变数组数据es6怎么改变数组数据Apr 26, 2022 am 10:08 AM

改变方法:1、利用splice()方法修改,该方法可以直接修改原数组的内容,语法为“数组.splice(开始位置,修改个数,修改后的值)”;2、利用下标访问数组元素,并重新赋值来修改数组数据,语法为“数组[下标值]=修改后的值;”。

import as在es6中的用法是什么import as在es6中的用法是什么Apr 25, 2022 pm 05:19 PM

在es6中,import as用于将若干export导出的内容组合成一个对象返回;ES6的模块化分为导出与导入两个模块,该方法能够将所有的导出内容包裹到指定对象中,语法为“import * as 对象 from ...”。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具