1. OOP 指什么？有哪些特性
- Object-oriented programming的缩写，即面向对象程序设计，其中两个最重要的概念就是类和对象。类只是具备了某些功能和属性的抽象模型，而实际应用中需要一个一个实体，也就是需要对类进行实例化，类在实例化之后就是对象。
- 特性
- 继承性：子类自动继承其父级类中的属性和方法，并可以添加新的属性和方法或者对部分属性和方法进行重写。继承增加了代码的可重用性。
- 多态性：子类继承了来自父级类中的属性和方法，并对其中部分方法进行重写。
- 封装性：将一个类的使用和实现分开，只保留部分接口和方法与外部联系。
2. 如何通过构造函数的方式创建一个拥有属性和方法的对象?
var Person = function(){
this.name = 'gaoyang';
this.age = 18;
}
var person = new Person();
console.log(person.name)
3. prototype 是什么？有什么特性
- 我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象(原型对象).
- 特性: 只要创建一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象. 在默认情况下 ,所有原型对象都会自动获得一个constructor(构造函数)属性,这个属性包含一个指向prototype属性所在函数的指针.
- 使用:将所有对象实例共享的属性和方法添加到prototype指向的原型对象中
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('前端');
p1,p2自己的两个属性name,sayName.他们的原型`_proto_`都是有walk属性的Object
问题5. 创建一个 Car 对象，拥有属性name、color、status；拥有方法run，stop，getStatus
var Car = function(name,color,status){
this.name = name;
this.color = color;
this.status = status;
this.run = function(){
this.status = 'running'
console.log('running')
}
this.stop = function(){
this.status = 'stopping'
console.log('stopping')
}
this.getStatus = function(){
console.log(this.status)
}
}
var car = new Car('BWM','red','running')
car.stop()
car.getStatus()
问题6. 创建一个 GoTop 对象，当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。拥有以下属性和方法
1. `ct`属性，GoTop 对应的 DOM 元素的容器
2. `target`属性， GoTop 对应的 DOM 元素
3. `bindEvent` 方法， 用于绑定事件
4 `createNode` 方法， 用于在容器内创建节点
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.ct {
height: 1000px;
}
</style>
</head>
<body>
<div class="ct">
</div>
<script>
var GoTop = function (ct,target) {
this.ct = document.createElement(ct)
this.target = document.createElement(target)
this.target.innerText = '点击回到顶部'
this.createNode();
this.bindEvent();
}
GoTop.prototype.bindEvent = function () {
this.target.addEventListener('click', function () {
window.scrollTo(0, 0);
})
}
GoTop.prototype.createNode = function () {
this.ct.appendChild(this.target)
document.body.appendChild(this.ct)
}
var goTop = new GoTop('div','button');
</script>
</body>
</html>
网友评论