一. 学习内容
文章目录
1.箭头函数
箭头函数简化了function的使用。没有arguments参数列表,只有剩余参数。
var fun=(...a)=>{
console.log(...a);
}
fun(13,32434,122,3);
箭头函数的this指向定义时所在的对象,不是使用时的对象。也是指向外层作用域。
var li={
name:'李明',
age:'18',
buy:function(){
console.log('外层函数');
return ()=>{
console.log('我是一个箭头函数');
console.log(this);
}
}
}
li.buy()();
效果
箭头函数,不能当做构造函数使用,不能使用new关键字。
apply call bind 可以更改函数的this指向。
代码
var li={
name:'李明',
age:'18',
buy:function(){
console.log('外层函数');
return ()=>{
console.log('我是一个箭头函数');
console.log(this);
}
}
}
function fun_1(){
console.log(this);
}
li.buy()();
fun.bind(li);
fun_1.apply(temp);
fun_1.call(li);
var fun_2=fun_1.bind(li);
fun_2();
var s=li.buy().bind(temp);
s();
fun.apply(temp);
fun.call(temp);
效果
直接修改箭头函数的this结果还是指向window
箭头函数指向问题:
1.普通箭头函数的this指向window
2.事件的this指向事件源
3.构造函数的this指向实例对象
4.具体对象的this指向当前对象
apply,call 修改this会直接调用
hind返回一个新函数。
2构造函数
通过class 名定义
js类就是一个超级构造函数,代码
定义一个狗类
class Animal{
constructor(){
this.explain='会动的生物';
}
basic(){
console.log('运动');
}
}
class Dog extends Animal{
constructor(name,color){
super(name,color);
this.color=color;
this.name=name;
this.leg=4;
this.eye=2;
this.mouth=1;
this.ear=2;
this.tall=1;
this.intro=`狗狗有${this.leg}腿,${this.eye}只眼睛,${this.mouth}个嘴巴,${this.ear}只耳朵,${this.tall}条尾巴。狗狗是人类的好朋友。`
}
state(){
console.log(`这是一只${this.color}的${this.name}`);
}
cry(){
console.log('汪汪');
}
fawn(){
console.log('卖萌打滚');
}
}
实例化
var taidi=new Dog('泰迪','白色');
taidi.state();
taidi.cry();
taidi.fawn();
效果
constructor()里面放自有属性
类的继承,通过,extends 继承类,继承的类拥有父类的属性和方法,之类添加属性,不影响父类
继承的函数 要使用 super()来复制参数,在子类中要使用了super()关键字,才可以使用this。如果继承的不传参数,会造成属性传参失败。
原型链:使用一个对象的属性或方法的时候,会在该对象的自身查找,找到了就使用,没找到就去关联的prototype哪里寻找,要是还是没找到就去prototype关联的prototype里寻找,依次类推,直到找到prototype为undefined。没有就报错了
静态属性和方法
静态属性和方法需要类直接调用,不需要实例对象
在类的方法前,写关键字static。表示该方法为静态方法,类可以直接调用。
static wan(){
console.log('你好');
}
使用
Dog.wan();
效果
静态方法和静态属性是可以继承的,不是复制的和实例对象不一样。实例对象的属性是复制过来的。
静态属性,直接给类添加属性,可以通过类直接调用。
Dog.a='食肉动物';
console.log(Dog.a);
console.log(taidi.a);
用实例对象调用,输出是undefined
私有方法,给方法名前加一个下滑线。默认该方法只能在类中调用。目前还没实现。
class Cellphone{
constructor(){
this._recharge();
}
_recharge(){
console.log('有些是必须要学习得');
}
}
let huawei=new Cellphone();
huawei._recharge();
目前还没实现。
二 .练习题
1、画出 object person student原型链关系图
1.编写程序使用ES6定义 Person类,包括类实例属性(name,age),实例方法say()该方法
返回name和age字符串
class Person{
constructor(name,age){
this.name=name;
this.age=age;
}
say(){
return `${this.name}${this.age}`
}
}
class Pupil extends Person{
constructor(name,age,education){
super(name,age,education);
this.education=education;
}
}
let liming=new Pupil('李明',20,'小学');
var l=liming.say();
console.log(l);
效果
3.下面程序正确吗?错在哪里?如何改正?
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class ColorPoint extends Point {
constructor(x, y, color) {
this.color = color; // ReferenceError
super(x, y);
}
}
var cp=new ColorPoint(10,20,'red');
错误在于constructor复制父类的参数,super()要放在this之前
//改正之后
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y);
this.color = color; // ReferenceError
}
}
var cp=new ColorPoint(10,20,'red');
4.下面程序执行结果为?
class Parent {
static myMethod(msg) {
console.log('static', msg);
}
myMethod(msg) {
console.log('instance', msg);
}
}
class Child extends Parent {
static myMethod(msg) {
super.myMethod(msg);
}
myMethod(msg) {
super.myMethod(msg);
}
}
Child.myMethod(1); // static 1
var child = new Child();
child.myMethod(2); // instance 2
输出结果是
'static' 1
'instance' 2
为什么·,因为静态方法,实例化对象只能调用普通的方法,只可以通过类调用静态方法,而类无法调用内部普通方法,实例对象也无法调用静态方法。
5.请利用class重新定义Cat,并让它从已有的Animal继承,然后新增一个方法say(),
返回字符串’Hello, xxx!’
class Animal {
constructor(name) {
this.name = name;
}
}
cat类
class Animal {
constructor(name) {
this.name = name;
}
}
class Cat extends Animal{
constructor( name){
super(name);
this.name=name;
}
say(){
return 'Hello.xxx!';
}
}
let cat=new Cat('花花');
var l=cat.say();
console.log(l);
效果
6.接上面程序分析下面代码执行结果为
var kitty = new Cat('Kitty');
var doraemon = new Cat('哆啦A梦');
if ((new Cat('x') instanceof Animal) && kitty && kitty.name === 'Kitty' && kitty.say &&
typeof kitty.say === 'function' && kitty.say() === 'Hello,Kitty!' &&
kitty.say === doraemon.say) {
console.log('测试通过!');
} else {
console.log('测试失败!');
}
结果
测试通过;
7.下面程序执行结果为
(typeof (new (class { class () {} })));
结果 object;