问答

继承有什么作用?
继承可以将另一个function上的prototype拷贝过来，当想做多个属性的面包的时候会更加的方便，方法不用重复copy了。

有几种常见创建对象的方式? 举例说明?
"工厂模式"、“构造函数模式”、“原型模式”
工厂模式:

<script>
    var person = function (name,age) {
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.attribute = function (name) {
            console.log("my name is "+ this.name);
            console.log("my age is "+ this.age);
        }
        return obj;
    }
    var myself = new person("slr",21);
    myself.attribute();
</script>

构造函数模式:

<script>
    function Person(name, age){
        this.name = name
        this.age = age
        this.attribute = function(){
            console.log(this.name + this.age);
        }
    }
    var myself = new Person("slr",21);
    var myself2 = new Person("wby",20);
    myself.attribute();
    myself2.attribute();
</script>

构造函数是独立的每个copy一份，虽然方法一样，但是不是一个东西了

difference

原型模式:

<script>
    function Person(name,age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.sayAttribute = function () {
        console.log(this.name + this.age)
    }
    var p1 = new Person("slr",21);
    p1.sayAttribute();
</script>

共用方法了

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

//方法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);

方法一构造出来的每个方法和属性都是独立的，独一份new出来。而方法二的属性是每个独一份的，但是方法是共用的，上面有解释过了。

Object.create 有什么作用？兼容性如何？如何使用？（难度:***）
object.create(proto,[propertiesObject])
这是ES5新出的方法
proto：指定的新创建对象的原型
[propertiesObject]：可选参数，是对象的属性描述符，里面可以添加一些自定义的属性和方法。
兼容性：只兼容IE9+，Chrome5+，Firefox 4.0+，Opear 11.60+,Safari 5+

<script>
    //    这是inherit
    function inherit(a, b) {
        var c = Object.create(a.prototype)
        b.prototype = c;
        c.constructor = b;
    }
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.sayAttribute = function () {
        console.log(this.name + this.age)
    }
    function PersonSecond(name, age, sex) {
        Person.call(this, name, age);//这里的作用就是调用函数Person在PersonSecond函数内运行
        this.sex = sex;
    }
    //这里
    inherit(Person, PersonSecond);
    Person.prototype.newSolution = function () {
        console.log("PersonSecond sex "+ this.sex);
    }
    var p1 = new PersonSecond("slr", 21, "male");
    p1.sayAttribute();
    p1.newSolution();
</script>

hasOwnProperty有什么作用？如何使用？（难度:***）
hasOwnProperty可以得出对象是否有指定的名称和属性

uploaddddddddd.png

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

function create(obj){
    if(Object.create){
        return Object.create(obj);
    }else {
        function show(){};
        show.prototype=obj;
        return new show();
    }
}

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

用于确认函数的兼容性，如果兼容就可以就会执行。

<script>
    if (typeof Object.create != 'function') {//首先判断是否兼容
        Object.create = (function () {

            var Temp = function () {
            };

            return function (prototype) {
                if (arguments.length > 1) {
                    return false;
                }
                if (prototype !== Object(prototype)) {
                    return false;
                }
                if (prototype === null) {
                    return false;
                }

                Temp.prototype = prototype;
                var result = new Temp();
                Temp.prototype = null;
                return result;
            };
        })();
    }
</script>

如下代码中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是为了指向上一个函数，让上一个函数在Male里面执行，以便获得属性。

补全代码，实现继承（难度:****）

function Person(name, sex){
    // todo ...
}
Person.prototype.getName = function(){
    // todo ...
};    
function Male(name, sex, age){
   //todo ...
}
//todo ...
Male.prototype.getAge = function(){
    //todo ...
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();

<script>
    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)//ES5的方法

    Male.prototype.getAge = function () {
        console.log(this.age)
    };
    Male.prototype.printName = function () {
        console.log(this.getName())
    }
    var ruoyu = new Male('若愚', '男', 27);
    ruoyu.printName();
</script>

CODE

实现如下dialog 弹窗功能，参考效果

//功能描述： 
// 1. 可使用 dialog.open() 去打开弹窗
// 2. 当点击确定、取消时可使用用户自定义事件
// 3. dialog 可拖动
// 4. 允许页面展示多个 dialog
function Dialog(){
//todo ...
}
var tpl = '<ul><li>列表1</li><li>列表2</li><li>列表1</li><li>列表1</li></ul>';
$('#open4').on('click',function(){
  var dialog4 = new Dialog();
  dialog4.open({
    title: '谷',
    message: tpl,
    isShowCloseBtn: true,
    isShowConfirmBtn: true,
    onClose: function(){
      alert('close')
    },
    onConfirm: function(){
      alert('确定');
    }
  });
});

继承-弹框

继承

问答

CODE

推荐阅读更多精彩内容