对象_原型_木桶布局

1. OOP 指什么？有哪些特性

• OOP指的是面向对象编程

• 三大特性：封装、继承、多态
  1.封装
  封装指的是将方法和属性保存起来，防止外界直接调用的一种手段；若要访问属性和方法，必须先声明一个类的实例，通过这个实例的接口去访问属性和调用方法
  2.继承
  A对象有一些属性和方法，B对象有一些属性和方法；若A对象继承自B对象，A对象可以访问B对象的属性和方法
  3.多态
  当两个对象继承自同一个类时，每个对象对父类的某一方法或者属性重写后的不同表现形式就是多态；
  例子：鸡类和狗类都继承自动物类；动物类有say()方法，鸡类和狗类继承后分别重写为function say(){console.log('鸡叫')}和function say(){console.log('狗叫')}

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

        //构造函数第一个字母大写
       var Human = function () { this.name = 'human' }
        Human.prototype.eat = function () { console.log('吃饭') }
        var man = new Human;
        console.dir(man)

image.png

3. prototype 是什么？有什么特性

• 每一个函数在创建之后都会拥有 prototype 的属性，这个属性指向函数的原型对象
  原型对象可视为公共区域，默认含有 constructor、 proto 这两个属性
  使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法，通常我们可以将实例对象的公共属性和方法放在 prototype 对象中

• 特性：
  用来实现基于原型的继承与属性的共享
  所有对象都有 proto，指向其构造函数的prototype
  obj.proto === Object.prototype //true
  构成原型链，同样用于实现基于原型的继承，例：访问一个对象的属性时，如果在obj中找不到，那么就会沿着proto依次查找，直到找到这个属性或null

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('前端');

image.png

5. 创建一个 Car 对象，拥有属性name、color、status；拥有方法run，stop，getStatus

//创建一个 Car 对象，拥有属性name、color、status；拥有方法run，stop，getStatus
var Car = function (name, color, status) {
    this.name = name
    this.color = color
    this.status = status

}
Car.prototype.run = function () {
    console.log('----->run')
}
Car.prototype.stop = function () {
    console.log('----->stop')
}

Car.prototype.getStatus = function () {
    console.log('----->getStatus:'+this.status)
}

var car = new Car('哈哈','pink',true);
car.run();//----->run
car.stop();
car.getStatus(); 

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

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

预览

7. 使用木桶布局实现一个图片墙

预览
代码

8.拓展阅读

JS 的 new 到底是干什么的？
JS 原型链