问题1: OOP 指什么?有哪些特性
- OOP(Object oriented Programming)指面向对象编程,以对象为基本,通过类和继承,实现相应的功能,并通过实例化进行相应的操作。
主要特性
- 封装:将类的使用和实现分开,只保留部分接口和方法与外界联系
2.继承:子类自动继承父类中的属性和方法,并可以添加新的属性和方法或者对部分的属性和方法进行重写,增加代码的可重复性
3.多态: 子类继承来自祖父类的方法和属性,对其中一部分进行重写
问题2: 如何通过构造函数的方式创建一个拥有属性和方法的对象?
function Person(name, age) {
this.name = name
this.age = age
this.printName = function() {
console.log(this.name)
}
}
var person1 = new Person('卉', 26)
var person2 = new Person('慧', 24)
person1.printName()
person2.printName()
问题3: prototype 是什么?有什么特性
通过构造函数创建的对象实例的原型对象,通常用于存放公共属性和方法,可以节省内存,当有很多对象的时候,不要每一个对象都重复去创建一个方法。
每一个函数都有一个 prototype ,这个属性最终指向函数的构造函数 Function.prototype , 里面有很多常用的公共方法,比如reduce、map、sert、filter等。
特性:
- 每一个函数都有一个 prototype 属性,指向一个原型对象
- prototype 一旦更改,将影响其所有的实例化对象的方法
- 所有对象都有
__proto__
- 对象的
__proto__
等于构造函数.prototype - 访问一个对象属性时,如果对象有这个属性,就获取,就一直去上一层的
__proto__
里面找
问题4:画出如下代码的原型图
function People (name){
this.name = name;
this.sayName = function(){
console.log('my name is:' + this.name);
}
}
People.prototype.walk = function(){
console.log(this.name + ' is walking');
}
var p1 = new People('饥人谷');
var p2 = new People('前端');
问题5: 创建一个 Car 对象,拥有属性name、color、status;拥有方法run,stop,getStatus
function Person(name, age) {
this.name = name
this.age = age
this.printName = function() {
console.log(this.name)
}
}
var person1 = new Person('卉', 26)
var person2 = new Person('慧', 24)
person1.age
person1.printName()
person2.printName()
function Car(name, color, status) {
this.name = name
this.color = color
this.status = status
}
Car.prototype.run = function() {
console.log('run')
}
Car.prototype.stop = function() {
console.log('stop')
}
Car.prototype.getStatus = function() {
console.log(this.status)
}
// Car.prototype = {
// run: function() {
// console.log('run')
// },
// stop: function() {
// console.log('stop')
// },
// getStatus: function() {
// console.log(this.status)
// }
}
var car1 = new Car('宝马', '红色', '行进')
car1.run()
car1.getStatus()
问题6: 创建一个 GoTop 对象,当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素,点击页面滚动到顶部。拥有以下属性和方法
1. `ct`属性,GoTop 对应的 DOM 元素的容器
2. `target`属性, GoTop 对应的 DOM 元素
3. `bindEvent` 方法, 用于绑定事件
4. `createNode` 方法, 用于在容器内创建节点
问题7: 使用木桶布局实现一个图片墙