前端面试典型例题之ECMAScript6，2020.12.07

1.编写程序使用ES6定义 Person类，包括类实例属性（name,age）,实例方法say()该方法返回name和age字符串

<script>
  class Person {
    constructor(name, age) {
      //实例属性
      this.name = name;
      this.age = age;
      //实例方法
      // this.say = function () {
      //   return `姓名：${this.name}，年龄：${this.age}`;
      // }
    }
    say() {
        return `姓名：${this.name}，年龄：${this.age}`;
    }
  }

  let p = new Person('李四', 25);
  let str = p.say();
  console.log(str);
</script>

2.下面程序执行结果为:

 var p=new Person();
  console.log(p.__proto__===Person.prototype)

结果：true：
在原型链中，实例对象的__proto__ 和 构造函数Person的prototype 都指向的是 Person.prototype

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');

结果：报错 Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
原因：
		 1.子类的this关键字根据super方法创建，必须先有super方法，this关键字才能使用，否则就会报错。
		 2.子类没有自己的this对象，需要继承父类的this对象再添加东西
修改办法：替换子类constructor中super和this语句的顺序，即：
class ColorPoint extends Point {
   constructor(x, y, color) {
    super(x, y);
	this.color = color; // ReferenceError
   }
}

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);
var child = new Child();
child.myMethod(2); 

结果：
	static 1
	instance 2
分析：
Child.myMethod(1);通过子类名调用，执行的是子类中的静态方法，在子类的静态方法中通过super关键字调用父类中的静态方法
child.myMethod(2);通过实例对象调用，执行的是子类中的普通方法，在子类的普通方法中通过super关键字调用父类中的普通方法

5.请利用class重新定义Cat，并让它从已有的Animal继承，然后新增一个方法say()，返回字符串’Hello, xxx!'

class Animal {
    constructor(name) {
        this.name = name;
    }
}

结果：
class Animal {
    constructor(name) {
      this.name = name;
    }
  }

  class Cat extends Animal {
    constructor(name) {
      super(name);
    }
    say() {
      return 'Hello, xxx!'
    }
  }

  let  tom = new Cat('TomCat');
  console.log(tom.say());

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('测试失败!');
}

结果：测试失败!
原因：
new Cat('x') instanceof Animal：判断Cat类的实例对象是否为Animal类的实例对象，true
kitty：var声明的变量，保存了Cat类的实例对象，传递参数'Kitty'，故kitty.name === 'Kitty' && kitty ，true
typeof kitty.say === 'function'：判断kitty.say保存的数据类型是否为function ,true
kitty.say() === 'Hello,Kitty!'：判断say方法执行的结果，上面的返回'Hello, xxx' != 'Hello,Kitty'，false
kitty.say === doraemon.say：写在constructor外的方法是类的原型的，是共有的,true

所以该if语句最终为false

7.下面程序执行结果为

(typeof (new (class { class () {} })));

结果："object"
typeof：用来判断数据的类型，然而通过new声明的数据都是object类型的

标签：ECMAScript6,07,kitty,say,new,例题,super,class,name
来源： https://blog.csdn.net/MaybyYouLove/article/details/111060477