问答
- 继承有什么作用?
继承可以将另一个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('确定');
}
});
});
