问题
1.继承有什么作用? （难度:***）
继承机制使得不同的实例可以共享构造函数的原型对象的属性和方法，以提高代码的复用性；
2.有几种常见创建对象的方式? 举例说明? （难度:****）
1.构造函数法
稍微学过JS的人都知道的方法：
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype = {
sayName:function(){
console.log(this.name)
}
}
var Jack = new Person('Jack',18)
console.log(Jack.name)//Jack
console.log(Jack.age)//18
Jack.sayName()//Jack
这种使用构造函数法去创建对象是JS创建对象的基本方法；
2.Object.create()法
Object.create()是ES5提出的一个新的方法，它可以传入一个对象作为该方法返回的对象的原型对象；
//使用字面量创建一个对象作为实例的原型对象；
var Person = {
name: 'Jack',
age:'18',
sayName:function(){
console.log(this.name)
}
}
var Jack = Object.create(Person)
console.log(Jack.name)//Jack
console.log(Jack.age)//18
Jack.sayName()//Jack
Object.create()的内在原理：
Object.create = function(obj){
function F(){};
F.prototype = obj;
return new F(){};
}
这种创建对象的方法优点是比较简单，缺点是作为原型对象的对象的属性和方法是公有变量，容易遭受修改，实例对象之间也不能共享数据；
3.极简主义法
这种方法的实现方法是：
//1.利用一个对象模拟类，在该对象中定义一个构造函数createNew()用于生成实例
var Person = {
createNew:function(){}
}
//2.当调用Person.createNew()方法时，该方法会返回一个实例对象作为返回值，该实例对象定义了实例的属性和方法；
var Person = {
createNew:function(){
var p = {};
p.name = 'Jack',
p.age = '18',
p.sayName = function(){
console.log(this.name);
}
return p
}
}
var Jack = Person.createNew()
console.log(Jack.name)
console.log(Jack.age)
Jack.sayName()
3.下面两种写法有什么区别? （难度:***）
//方法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);
上面两种写法的区别在于：
<pre>
同样是printName方法，一个直接部署在构造函数内部的实例对象上，
另一个部署在构造函数的prototype对象上，
前者在每生成一个实例之后实例的printName就新占用内存，
而后者每生成一个实例后会共享构造函数prototype对象上的printName方法，以达到节省内存的效果；
</pre>
4.Object.create 有什么作用？兼容性如何？如何使用？ （难度:***）
-
Object.create()是ES5提出的一个新的方法，它可以传入一个对象作为该方法返回的对象的原型对象；
-
目前，各大浏览器的最新版本（包括IE9）都部署了这个方法。如果遇到老式浏览器，可以用下面的代码自行部署：
if(!Object.create){
Object.create = function(obj){
function F(){};
F.prototype = obj;
return new F();
}
}
- 实例详见第2题创建对象方法之Object.create法
5.hasOwnProperty有什么作用？ 如何使用？ （难度:***）
对象实例的hasOwnProperty方法返回一个布尔值，用于判断某个属性定义在对象自身，还是定义在原型链上。
var o = {
name:'teren'
}
o.hasOwnProperty('name')//true
o.hasOwnProperty('toString')//false
Object.getPrototypeOf(o).hasOwnProperty('toString')//true
6.实现Object.create的 polyfill，如：（ps: 写个 函数create，实现 Object.create 的功能) （难度:****）
function create(obj){
function F(){};
F.prototype = obj;
return new F()
}
var obj = {a: 1, b:2};
var obj2 = create(obj);
console.log(obj2.a); //1
7.如下代码中call的作用是什么? （难度:****）
function Person(name, sex){
this.name = name;
this.sex = sex;
}
function Male(name, sex, age){
Person.call(this, name, sex);
//构造函数Person在构造函数Male作用域下执行，以实现构造函数的继承；
this.age = age;
}
8.补全代码，实现继承 （难度:****）
function Person(name, sex){
this.name = name;
this.sex = sex;
}
Person.prototype.getName = 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
};
Male.prototype.printName = function(){
console.log(this.name)
}
var ruoyu = new Male('teren', 'male', 18);
ruoyu.printName();//teren
console.log(ruoyu.getAge());//18
console.log(ruoyu.getName())//teren
代码
1.实现如下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('确定');
}
});
});
2.【有兴趣可选做，不做强制要求】实现如下一个日历组件 【Demo】
<input class="date-ipt" type="text" placeholder="有初始值" date-init="2016/05/31" />
<input class="date-ipt" type="text" placeholder="无初始值" />
<script>
// 使用
$('.date-ipt').datePicker();
</script>
网友评论