ブラウザ対応状況
2017年1月時点では4大ブラウザ、Opera,Chrome,Firefox,Edgeで対応している。Eclipseでの対応
Elipse Neon はES2015をデフォルトでサポートしている。Window → Preferences → JavaScript → Validator 「Source type:」でModuleを選択する。
基本的なクラス
$(function(){
var animal = new Animal('ネオンテトラ');
animal.test_func();
});
class Animal{
constructor(animal_name){
this.name = animal_name;
}
test_func(){
let name = this._test2();
console.log(`hello_world=${name}`);
}
_test2(){
return this.name;
}
}
注意点
publicメソッドとprivateメソッドを区別するコードがないようである。letとconst
変数宣言にletとconstが使えるようになった。文字列の埋込
変数を文字列に埋め込めるようになった。let str = `動物の名前は${animal_name}です`
Promise.resolve()
.then(function(){
return new Promise(function(fulfilled, rejected){
window.setTimeout(function(){
$('#res').append('コールバック1<br>');
fulfilled(); // →達成：コールバック2へ
},1000);
})
})
.then(function(){
return new Promise(function(fulfilled, rejected){
window.setTimeout(function(){
$('#res').append('コールバック2<br>');
fulfilled(); // →達成：コールバック3へ
},1000);
})
})
.then(function(){
return new Promise(function(fulfilled, rejected){
window.setTimeout(function(){
$('#res').append('コールバック3<br>');
fulfilled();
},1000);
})
});
function test2(){
var promiseTest = new PromiseTest();
promiseTest.func1();
}
class PromiseTest{
constructor(){
this.test_a = 999;
}
func1(){
Promise.resolve()
.then(() => {
return new Promise((fulfilled, rejected) => {
window.setTimeout(() => {
$('#res').append(this.test_a + ' コールバック1<br>');
this.test_a ++;
fulfilled();
},1000);
})
})
.then(() => {
return new Promise((fulfilled, rejected) => {
window.setTimeout(() => {
$('#res').append(this.test_a + ' コールバック2<br>');
this.test_a ++;
fulfilled();
},1000);
})
})
.then(() => {
return new Promise((fulfilled, rejected) => {
window.setTimeout(() => {
$('#res').append(this.test_a + ' コールバック3<br>');
this.test_a ++;
fulfilled();
},1000);
})
})
;
}
}
Promise.resolve()
.then(function(){
return new Promise(function(fulfilled, rejected){
window.setTimeout(function(){
$('#res3').append('コールバック1X<br>');
fulfilled();
},1000);
})
})
.then(function(){
return new Promise(function(fulfilled, rejected){
window.setTimeout(function(){
$('#res3').append('コールバック2<br>');
rejected('リジェクト:エラーキャッチのテストです。');
},1000);
})
})
.then(function(){
return new Promise(function(fulfilled, rejected){
window.setTimeout(function(){
$('#res3').append('コールバック3<br>');
fulfilled();
},1000);
})
}).catch(function(e) {
console.log(e);
alert(e);
})
;
function main(){
var obj = new Animal();
obj.funcA();
}
class Animal{
funcA(){
$('ul li').each((i,elm) => {
var animal_name = $(elm).html();
this._funcB(animal_name);
});
}
_funcB(animal_name){
console.log(animal_name);
}
}
$('#btn1').click(evt=>{
var btnElm = $(evt.currentTarget);
alert(btnElm.val());
});
var str1 = '苦しんでいる者たちを地から';
var str2 = `歯が剣，
そのあご骨が屠殺用の刀となっており，${str1}，
貧しい者たちを人の中から食い尽くそうとする世代がある`;
console.log(str2);
歯が剣， そのあご骨が屠殺用の刀となっており，苦しんでいる者たちを地から， 貧しい者たちを人の中から食い尽くそうとする世代がある
$(()=>{
var neko = new Neko();
neko.test1();
neko.test2();
});
class Animal{
constructor(){
$("#res1").append('Animalクラスのconstructorが呼び出されました。<br>');
}
test1(){
$("#res1").append('Animalクラスのtest1メソッドが呼び出されました。<br>');
}
}
// ※注意 : サブクラス（Neko)は基本クラス(Animal)の下に記述すること
class Neko extends Animal{
constructor(){
super();
$("#res1").append('Nekoクラスのconstructorが呼び出されました。<br>');
}
test2(){
$("#res1").append('Nekoクラスのtest2メソッドが呼び出されました。<br>');
this.test1();
}
}
Animalクラスのconstructorが呼び出されました。 Nekoクラスのconstructorが呼び出されました。 Animalクラスのtest1メソッドが呼び出されました。 Nekoクラスのtest2メソッドが呼び出されました。 Animalクラスのtest1メソッドが呼び出されました。
HTML
<input id="img_fn" type="file" name="img_fn" accept="image/*" /><br>
<img id="img1" src="" alt="" style="width:200px;height:200px" />
<div id="res" class="text-success"></div>
JavaScript
$(() => {
var fileuploadImg = new FileuploadImg();
});
/**
* ES6のクラス
*/
class FileuploadImg{
constructor(param){
jQuery("#img_fn").change(e => {
this.test(); // thisは当クラスを指しているならメソッドを呼び出せる。
});
}
test(){
this.output('thisによるメソッドの呼び出しテスト。');
}
output(msg){
console.log(msg);
jQuery("#res").append(msg + '<br>');
}
}