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 = '<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('确定');
}
});
});
