高级1-对象、原型

1. OOP 指什么?有哪些特性? 【高级1-对象、原型】OOP指(Object Oriented Programming,面向对象程序设计),面向对象编程(OOP)是一种基于“对象”概念的编程范式,它可以以字段的形式包含数据,通常称为属性; 以程序的形式,包含代码,通常称为方法。
面向对象有两个基本概念:
类:类(Class)定义了一件事物的抽象特点;它定义了一些特点(属性 property)和行为(方法 method);类是对象的类型模板。
实例:实例是根据类创建的对象;可以说类的实例是对象,类实际上就是一种数据类型;对象是类的具体化。
面向对象有三大特征:
封装:封装将变量和方法封装在一个类中,定义程序如何引用对象的数据,可以对成员变量进行隐藏,控制用户对类的修改和访问数据。外部对类成员的访问都通过方法进行,能够保护类成员不被非法修改。封装利于模块化和信息隐藏。
继承:如果类别A继承自类别B,那么把A称为B的子类,把B称为A的父类;子类拥有具有父类别的各种属性和方法,子类继承父类的同时,可以重新定义某些属性或方法,即覆盖父类别的原有属性和方法。也可为子类追加新的属性和方法
多态: 多态指同一个实体同时具有多种形式,即接口有多种不同的实现方式,允许将子类类型的指针赋值给父类类型的指针
2.如何通过构造函数的方式创建一个拥有属性和方法的对象? 使用new的方法,一个函数使用new调用的时候就是构造函数
new 运算符接受一个函数 F 及其参数:new F(arguments...)。这一过程分为三步:

  1. 创建类的实例。这步是把一个空的对象的 proto 属性设置为 F.prototype 。
  2. 初始化实例。函数 F 被传入参数并调用,关键字 this 被设定为该实例。
  3. 返回实例
    举例:
function Person(nick, age){ this.nick = nick; this.age = age; this.sayName = function(){ console.log(this.nick); } } var p1 = new Person('Byron', 25);

p1.nick "Byron" p1.age 25 p1.sayName() VM282:5 Byron

3.prototype 是什么?有什么特性? prototype是函数对象的一种属性,在函数声明后,函数自动获取,指向函数的原型对象;
当用这个函数作为构造函数创建对象时,对象实例的proto属性指向其构造函数的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('饥人谷'); var p2 = new People('前端');

[图片上传失败...(image-560399-1531072378397)]
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('Car is running'); }Car.prototype.stop = function () { console.log('Car is stopped'); }Car.prototype.getStatus = function () { console.log('Car status: ' + this.status); }var car1 = new Car(Bently, white, new);

高级1-对象、原型
文章图片
image.png 6.创建一个 GoTop 对象,当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素,点击页面滚动到顶部。拥有以下属性和方法
1. `ct`属性,GoTop 对应的 DOM 元素的容器 2.`target`属性, GoTop 对应的 DOM 元素 3.`bindEvent` 方法, 用于绑定事件 4 `createNode` 方法, 用于在容器内创建节点

返回顶部
7.使用木桶布局实现一个图片墙 木桶图片墙

    推荐阅读