对象&原型疑惑解答

2018-02-21  本文已影响0人  阿鲁提尔

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

面向对象编程(Object Oriented Programming,缩写为 OOP)是目前主流的编程范式。它将真实世界各种复杂的关系,抽象为一个个对象,然后由对象之间的分工与合作,完成对真实世界的模拟。

每一个对象都是功能中心,具有明确分工,可以完成接受信息、处理数据、发出信息等任务。对象可以复用,通过继承机制还可以定制。因此,面向对象编程具有灵活、代码可复用、高度模块化等特点,容易维护和开发,比起由一系列函数或指令组成的传统的过程式编程(procedural programming),更适合多人合作的大型软件项目。

哪些特性?

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

function People(name,age){
    this.name = name
    this.age = age
    this.sayName = function(){
        console.log(this.name)
    }
}
var p1 = new People(Herbert,18)

or

//原型链
function People(name,age){
    this.name = name
    this.age = age
}
People.prototype.sayName = function(){
    console.log(this.name)
}
var p1 = new People(Herbert,18)
p1.sayName()

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

prototype 是什么?

function定义的对象有一个prototype属性,prototype属性又指向了一个prototype对象,注意prototype属性与prototype对象是两个不同的东西,要注意区别。在prototype对象中又有一个constructor属性,这个constructor属性同样指向一个constructor对象,而这个constructor对象恰恰就是这个function函数本身。

prototype 用处?

使用 prototype的好处是不会额外产生内存,所有实例化后的对象都会从原型上继承这个方法。

特性:

Javascript规定,每一个构造函数都有一个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('Jack);
var p2 = new People('Herbert');
原型图

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

function Car(name,color,status){
  this.name = name;
  this.color = color;
  this.status = status;
}
Car.prototype = function(){
    this.run= function(){ //xxx }
    this.stop= function(){ //xxx }
    this.getStatus= function(){ //xxx }
}

var car1 = new Car(name,color,status);
car1.run()
car1.stop()
car1.getStatus()

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

  1. ct属性,GoTop 对应的 DOM 元素的容器
  2. target属性, GoTop 对应的 DOM 元素
  3. bindEvent 方法, 用于绑定事件
  4. createNode 方法, 用于在容器内创建节点

滚动到顶部

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

木桶布局

参考文章

上一篇 下一篇

猜你喜欢

热点阅读