继承有什么作用? (难度:***)
继承是面向对象编程的语言中拥有的特性, 继承可以提高代码的复用性, 基于类的面向对象语言通过继承可以使子类继承父类的属性和方法, 但是JavaScript中没有类的概念, JavaScript中通过使用原型链实现继承
有几种常见创建对象的方式? 举例说明? (难度:****)
- 工厂模式
缺点: 无法知道对象的类型
function createPerson(name, age, job) {
var o = new Object()
o.name = name
o.age = age
o.job = job
return o
}
var p1 = createPerson('Tom', 18, 'Engineer')
- 构造函数模式
缺点: 每个方法在每个实例上都重新创造一遍
function Person(name, age, job) {
this.name = name
this.age = age
this.job = job
this.sayName = function() {
console.log(this.name)
}
}
var p = new Person('james', 18, 'Engineer')
- 原型模式
缺点: 所有属性和方法都被实例共享
function Person() {
}
Person.prototype.name = 'Tom'
Person.prototype.age = 18
Person.prototype.job = 'Engineer'
Person.prototype.sayName = function(){
console.log(this.name)
}
var p1 = new Person()
- 构造函数和原型模式组合使用
ECMAscript中使用最广的模式
function Person(name, age, job) {
this.name = name
this.age = age
this.job = job
}
Person.prototype.sayName = function(){
console.log(this.name)
}
var p1 = new Person('Tom', 18, 'Engineer')
下面两种写法有什么区别? (难度:***)
//方法1
function People(name, sex){
this.name = name;
this.sex = sex;
this.printName = function(){
console.log(this.name);
}
}
var p1 = new People('饥人谷', 2)
//方法2
function Person(name, sex){
this.name = name;
this.sex = sex;
}
Person.prototype.printName = function(){
console.log(this.name);
}
var p1 = new Person('若愚', 27);
方法一和方法二的区别主要是方法一的printName方法定义在构造函数中, 使用的是构造函数模式创建对象, 方法二的printName方法定义在原型上, 使用的是构造函数和对象模式组合的方式创建对象, 因为方法一中的写法会导致每个实例都创建一个新的printName方法, 但是他们的功能是一样的, 这样做是没有必要的, 所以推荐方法二组合构造函数和原型模式创建对象的方法, 将私有的属性写在构造函数中, 公有的方法写在原型对象上
Object.create 有什么作用?兼容性如何?如何使用? (难度:***)
- 作用
创建一个拥有指定原型和若干属性的对象, 可以用来指定对象的原型 -
兼容性
Object.create()是ES5的属性, 支持IE9及以上的版本
- 如何使用
//模拟类实现继承
function Animal(name) {
this.name = name
}
Animal.prototype.sayName = function(){
console.log(this.name)
}
function Cat(name) {
Animal.call(this, name)
}
Cat.prototype = Object.create(Animal.prototype)
Cat.prototype.run = function(){
console.log('run')
}
var cat = new Cat('tommy')
//改写原型链直接实现继承
var animal = {
say: function() {
console.log(this.name)
}
}
cat = Object.create(animal)
cat.name = 'Tommy'
hasOwnProperty有什么作用? 如何使用? (难度:***)
- hasOwnProperty作用
可以用来判断一个是否是实例对象上的属性, 返回一个布尔值 - 用法
obj.hasOwnProperty(prop)
var person = {
name: 'Tom'
}
person.hasOwnProperty('name')//true
person.hasOwnProperty('toString')//false
实现Object.create的 polyfill,如:(ps: 写个 函数create,实现 Object.create 的功能) (难度:****)
//polyfill
function create(obj) {
if (typeof Object.create !== 'function') {
var Temp = function(){}
Temp.prototype = obj
return new Temp()
}
return Object.create(obj)
}
//test
var obj = {a: 1, b:2};
var obj2 = create(obj);
console.log(obj2.a);
如下代码中call的作用是什么? (难度:****)
function Person(name, sex){
this.name = name;
this.sex = sex;
}
function Male(name, sex, age){
Person.call(this, name, sex); //这里的 call 有什么作用
this.age = age;
}
使用call调用函数可以指定函数的this值, 因此, 可以把Person中的this值指定为使用Male构造函数构造出来的实例对象上, 实现构造函数的继承
补全代码,实现继承 (难度:****)
function Person(name, sex){
this.name = name
this.sex = sex
}
Person.prototype.printName = function(){
return this.name
};
function Male(name, sex, age){
Person.call(this,name,sex)
this.age = age
}
Male.prototype = Object.create(Person.prototype)
Male.prototype.constructor = Male
Male.prototype.getAge = function(){
return this.age
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();