前端基础（问答28）

---

keywords: 继承。

---

• 继承有什么作用?

继承可以使对象使用其他对象的属性和方法。例如Person、Male、Female3个对象，可以使Male和Female继承Person的属性的方法，同时Male和Female又具有自己的独特方法和属性，这样可以减少代码量，优化性能。

• 有几种常见创建对象的方式? 举例说明?

有4中常见的创建对象方式：普通模式、工厂模式、构造函数模式、原型模式。

普通模式：

obj = {
    name:'hello',
    age:100,
    sayName:function() {
        console.log(this.name)
    },
    sayAge:function() {
        console.log(this.age)
    }
}

工厂模式：

function person(name,age) {
    var obj = new Object()
    obj.name = name
    obj.age = age
    obj.sayName = function() {
        console.log(this.name)
    }
    obj.sayAge = function() {
        console.log(this.age)
    }
    return obj
}

var p1 = person('hello',100)
var p2 = person('world',12)

构造函数模式：

function Person(name,age) {
    this.name = name
    this.age = age
    this.sayName = function() {
        console.log(this.name)
    }
    this.sayAge = function() {
        console.log(this.age)
    }
}

var p1 = new Person('hello',100)
var p2 = new Person('world',12)

原型模式：

function Person(name,age) {
    this.name = name
    this.age = age
}

Person.prototype = {
    this.sayName:function() {
    console.log(this.name)
    },
    this.sayAge:function() {
        console.log(this.age)
    }
}

var p1 = new Person('hello',100)
var p2 = new Person('world',12)

• 下面两种写法有什么区别?

//方法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是定义p1上，此时的printName是p1独有的；而方法二的printName是定义在p1的原型上，此时的printName是所有实例共享的。

• Object.create 有什么作用？兼容性如何？如何使用？

Object.create接受一个对象a作为参数，并返回一个对象b。Object.create会将对象b的__proto__指向对象a。

var a = {
    print:function () {
        console.log('hello')
    }
}
var b = Object.create(a)
console.log(b.__proto__)

//Object{print:a.print()}

兼容性：

Object.create兼容性

• hasOwnProperty有什么作用？ 如何使用？

hanOwnProperty用于判断某个属性是否定义在对象自身,如果该存在且不再该对象上，则在原型链上。
eg:

var obj = {
    name:'hello',
    age:100
}

console.log(!!obj.hasOwnProperty)
obj.hasOwnProperty('hasOwnProperty')

//true
//false

obj.hasOwnProperty('name')

//true

• 实现Object.create的 polyfill，如：（ps: 写个 函数create，实现 Object.create 的功能)

function create(o) {
    if (typeof Object.create !== 'function') {
        function Fun() {}
        Fun.prototype = o
        return new Fun()
    } else {
        return Object.create(o)
    }
}

var obj = {a: 1, b:2};
var obj2 = create(obj);
console.log(obj2.a); //1

• 如下代码中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;
}

//执行Person函数，修改其中的this指向实例对象，并传入两个参数name和sex。

• 补全代码，实现继承

function Person(name, sex){
    this.name = name
    this.sex = sex
}

Person.prototype.getName = function(){
    console.log(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(){
    console.log(this.age)
};

var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();

代码

• 实现如下dialog 弹窗功能

//功能描述： 
// 1. 可使用 dialog.open() 去打开弹窗
// 2. 当点击确定、取消时可使用用户自定义事件
// 3. dialog 可拖动
// 4. 允许页面展示多个 dialog


function Dialog(){
//todo ...
}


var tpl = '
列表1
列表2
列表1
列表1
';

$('#open4').on('click',function(){
  var dialog4 = new Dialog();
  dialog4.open({
    title: '欢迎来到饥人谷',
    message: tpl,
    isShowCloseBtn: true,
    isShowConfirmBtn: true,
    onClose: function(){
      alert('close')
    },
    onConfirm: function(){
      alert('确定');
    }
  });
});

效果+代码