面向对象

问题1: OOP 指什么?有哪些特性

OOP (Object Oriented Programming)是指面向对象编程。

面向对象程序设计的基本特征有:

  1. 封装性:
    封装性是指将对象相关的信息和行为状态捆绑成一个单元,即将对象封装为一个具体的类。封装隐藏了对象的具体实现,当要操纵对象时,只需调用其中的方法,而不用管方法的具体实现。
  2. 继承性:
    一个类继承另一个类,继承者可以获得被继承类的所有方法和属性,并且可以根据实际的需要添加新的方法或者对被继承类中的方法进行覆写,被继承者称为父类或者超类,继承者称为子类或导出类,继承提高了程序代码的可重用性,Java中一个子类只能继承一个父类,Object类是所有类的最终父类。
  3. 多态性:
    多态性是指不同的对象对同一事物而做出的相同行为,一个类A可以指向其自身类和其导出类,一个接口可以指向其接口实现类,在方法参数中,使用多态可以提高参数的灵活性。

问题2: 如何通过构造函数的方式创建一个拥有属性和方法的对象?

构造函数是先构造一个普通函数,在内部使用了this变量定义属性和方法;并对构造函数使用new运算符,生成实例,同时this变量定义的属性和方法会绑定在实例对象上。
例:

function Func(attr,methon){
  this.attr = attr;
  this.methon = function(){
     consloe.log(methon);
  }
}
var func1 = new Func(attr1,methon1)
console.log(func1.attr) //attr1
Func.methon() //methon1

问题3: prototype 是什么?有什么特性

prototype是JavaScript中每一个构造函数都带有的属性,通称原型。这个对象的所有属性和方法,都会被构造函数的实例继承。实例可通过_proto_访问到其类型的ptototype属性。
例:

function Func(attr){
  this.attr = attr;
}
Func.prototype.methon = function(){
     consloe.log(attr);
  }
var func1 = new Func(attr1)
var func2 = new Func(attr2)

console.log(Func1._proto_ === Func2._proto_) //true
func1.prototype.methon() //attr1
func2.prototype.methon() //attr2

问题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('前端');
面向对象_第1张图片

问题5: 创建一个 Car 对象,拥有属性name、color、status;拥有方法run,stop,getStatus

function Car(name,color,status){
  this.name = name;
  this.color = color;
  this.status = status;
  this.run = function(){
     status++;
  }
  this.stop = function(){
     status = 0;
  }
  this.getStatus = function(){
     console.log(status);
  }
}
var car1 = new Car(name,color,status)

问题6: 创建一个 GoTop 对象,当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素,点击页面滚动到顶部。拥有以下属性和方法

  1. ct属性,GoTop 对应的 DOM 元素的容器
  2. target属性, GoTop 对应的 DOM 元素
  3. bindEvent 方法, 用于绑定事件
  4. createNode 方法, 用于在容器内创建节点
function GoTop(ct, target) {
      this._ct = querySelector(ct);
      this._target = createElement(target);
    GoTop.prototype.bindEvent = function () {
        this._target.onclick(function(){
            document.documentElement.scrollTop = document.body.scrollTop =0
        })
    }
    GoTop.prototype.createNode = function () {
        this._ct.appengChild(this._target)
    }
this.prototype.bindEvent()
this.prototype.createNode()
}
var goTop1 = GoTop(ul,li)

问题7: 使用木桶布局实现一个图片墙

demo

你可能感兴趣的:(面向对象)