前端面试典型例题之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类型的
上一篇:JavaScript创建函数的方式


下一篇:手写封装javascript的call,apply和bind方法