对象相关

2017-08-08  本文已影响0人  虚玩玩TT

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

OOP,Object Oriented Programming,面向对象编程。

特性:开放和封闭原则,三个要素,封装、继承、多态

开放和封闭原则:

函数会形成独立的作用域,用函数将代码封装,方便使用,对全局作用域的影响减少。

因为继承,后代可以获得父代的全部属性和方法

多态,同一个方法可以有不同的表现。比如通过new两个实例,可以分别对里面的方法函数扩展,得到的结果不同,但是,这都属于同一个方法。

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

function People(name,age){
  this.name = name
  this.age = age
  this.sayName = function(){
    console.log(this.name)
  }
}

var p = new People('hunger','20')
p.sayName()  //hunger

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

每个实例对象继承自另一个对象,后者被称为原型对象,原型对象上的属性和方法都能被实例对象拥有。
例:

function Person(name,age){
  this.name = name,
  this.age = age
}

Person.prototype.getName = function(){
  console.log(this.name)
}

var p = new Person()  //这时p是构造函数的一个实例,里面有一个__proto__属性,指向Person.prototype,并继承Person的全部属性和方法,这里Person为p的原型对象。

问题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('前端');
原型图.png

问题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(){}
  this.stop = function(){}
  this.getStatus = function(){}
}

var car = new Car

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

1. `ct`属性,GoTop 对应的 DOM 元素的容器
2.  `target`属性, GoTop 对应的 DOM 元素
3.  `bindEvent` 方法, 用于绑定事件
4 `createNode` 方法, 用于在容器内创建节点
function GoTop(){
  var content = document.createElement('div')
  content.setAttribute('class','ct')
  var target = document.createElement('div')
  var node = document.createTextNode('target')
  target.appendChild(node)
  target.setAttribute('class','target')
  this.ct = content
  this.target = target
  this.bindEvent = function(){
    this.ct.onclick = function(){
      document.body.scrollTop = 0
    }
  }
  this.createNode = function(){
    this.ct.append(this.target)
    document.body.append(this.ct)
  }
this.createNode()
this.bindEvent()
}
上一篇 下一篇

猜你喜欢

热点阅读