对象_原型

问题1： OOP 指什么？有哪些特性

OOP(Object-oriented programming)指面向对象程序设计, 其中两个最重要的概念就是对象和类

• JS中的对象都是基于一个引用类型创建的, 这个引用类型可以是原生类型, 也可以是开发人员定义的类型
  对象是无序属性的合集, 由若干个键值对构成, 属性包含基本值, 对象或函数
• 类是具备了某些功能和属性的抽象模型, 实际应用中需要对类进行实例化, 类在实例化之后就是对象
  而JavaScript语言没有"类", 而改用构造函数(constructor)作为对象基本结构的模板. 构造函数专门用来生成对象, 一个构造函数可生成 多个对象, 这些对象都有相同的结构
• 面向对象因为封装, 继承, 多态的特性使程序更易于扩展, 维护和复用

面向对象三大特性:

• 封装性: 讲一个类的使用和实现分开, 隐藏对象的属性和实现细节, 仅对外提供公共访问方式, 提高代码复用性和安全性
• 继承性: 子类自动继承其父级类中的属性和方法, 并可以, 并可以添加新的属性和方法或者对部分属性和方法进行重写, 继承增加了代码的复用性, 让类与类之间产生了联系, 提供了多态的前提
• 多态性: 子类继承了来自父级类中的属性和方法, 并对其中部分方法进行重写. (比如函数的length和数组的length都继承自对象但作用不同), 提高了代码的扩展性和可维护性

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

• 构造函数可以创建特定类型的对象, Object, Array, RegExp等是原生构造函数, 运行时会自动出现在执行环境中并拥有相应的方法
• 此外我们也可以创建自定义的构造函数, 从而自定义对象类型的属性和方法:

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

var person = new Person('dot', 'female', 2)

问题3： prototype 是什么？有什么特性

• 我们创建的每一个函数都有一个prototype(原型)属性, 这个属性是一个指向某个对象的指针, 这个对象的用途是可以包含特定类型的所有实例共享的属性和方法; 换句话说, 我们不必在构造函数中定义对象实例的信息, 而是将这些信息添加到原型对象中

function Person() {

}

Person.prototype.name = 'dot'
Person.prototype.sex = 'female'
Person.prototype.age = 2
Person.prototype.sayName = function () {
    console.log(this.name)//dot
}

var person1 = new Person()
person1.sayName()//dot

var person2 = new Person()
person2.sayName()//dot

console.log(person1.sayName() === person2.sayName())//true

• 原型对象特性:
  • 只要创建了一个新函数, 就会为该函数创建一个prototype属性, 这个属性指向函数的原型对象, 默认情况下, 所有的原型对象都会自动获得一个constructor属性, 指向他的构造函数; prototype被设计出来就是用来公用的，它是js继承机制的灵魂。
  • 创建了自定义的构造函数之后, 其原型对象默认只会有constructor属性, 其他方法都是由Object继承得来的
  • 当调用构造函数创建一个新实例后, 该实例的内部将包含一个_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 Car(name, color, status) {
    this.name = name;
    this.color = color;
    this.status = status;
}
Car.prototype.run = function() {console.log(this.run)}
Car.prototype.stop = function() {console.log(this.stop)}
Car.prototype.getStatus = function() {
    console.log(this.status)
}

var car =  new Car('mk', 'red', 201)

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

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

demo

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

demo