一、问答
(一 )、OOP 指什么?有哪些特性
指的是面向对象编程,(全称是Object Oriented Programming,OOP),它是一种计算机编程架构。面向对象程序设计可以看作一种在程序中包含各种独立而又互相调用的对象的思想。它具有如下特性:
1、封装性;
2、继承性;
3、多态性;
4、抽象性;
(二 )、如何通过构造函数的方式创建一个拥有属性和方法的对象?
可通过如下形式
trigger
(三 )、prototype 是什么?有什么特性?
每个函数都有一个prototype属性,prototype里默认有两个属性一个是constructor
,另一个是__proto__
(不同浏览器命名可能不同),constructor
其实指向该函数本身,而__proto__
则指向window下的Object.prototype,也就是说该函数的创建者是Object People.prototype instanceof Object
运行结果是ture,即People.prototype是Object的实例。
特性:通过构造函数方式新建一个对象时,新建的对象会从prototype属性上继承属性和方法。举个例子:
trigger
我们并没有在p1中定义sayName方法及hobby属性而是在People.prototype上定义了,但是却可以在p1上运行sayName()及hobby属性,其实是p1继承了People.prototype的sayName方法及hobby属性。
(四)、画出如下代码的原型图
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('前端');
(五 )、以下代码中的变量age有什么区别
function People (){
var age = 1 // 在函数里定义个一个局部变量age
this.age = 10; //将10赋给相应对象的age,
}
People.age = 20; //给函数绑定一个值为20的age属性
People.prototype.age = 30;// 在函数的原型上绑定一个值为30的age属性
二、代码
(一 )、创建一个 Car 对象,拥有属性name、color、status;拥有方法run,stop,getStatus ;
Title
在线预览地址:https://github.com/have-not-BUG/task/blob/master/renwu/renwu35/renwu35-1.html
(二 )、创建一个 GoTop 对象,当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素,点击页面滚动到顶部。拥有以下属性和方法
ct属性,GoTop 对应的 DOM 元素的容器
target属性, GoTop 对应的 DOM 元素
bindEvent 方法, 用于绑定事件
createNode 方法, 用于在容器内创建节点
方法一、代码如下:
Title
内容1
内容1
内容2
内容3
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容2
内容3
内容1
内容2
内容3
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容2
内容3
内容1
内容2
内容3
内容1
内容2
内容3
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容2
内容3
内容1
内容2
内容3
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容2
内容3
内容1
内容2
内容3
在线预览地址 https://github.com/have-not-BUG/task/blob/master/renwu/renwu35/renwu35-2A.html
方法二、
Title
内容1
内容1
内容2
内容3
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容2
内容3
内容1
内容2
内容3
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容2
内容3
内容1
内容2
内容3
内容1
内容2
内容3
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容2
内容3
内容1
内容2
内容3
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容2
内容3
内容1
内容2
内容3
在线预览地址:
https://github.com/have-not-BUG/task/blob/master/renwu/renwu35/renwu35-2B.html
(三 )、使用构造函数创建对象的方式完成轮播功能( 查看demo ),使用如下调用方式
function Carousel($node){
//todo...
}
Carousel.prototype = {
//todo ..
};
var $node1 = $('.ct').eq(0);
var $node2 = $('.ct').eq(1);
var carousel1 = new Carousel($node1);
var carousel2 = new Carousel($node2);
Title
- ![](http://upload-images.jianshu.io/upload_images/2166980-e1a09725c15c26a4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- ![](http://upload-images.jianshu.io/upload_images/2166980-d72dc312ec48d4f2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- ![](http://upload-images.jianshu.io/upload_images/2166980-8726cd5c94bf76c9.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- ![](http://upload-images.jianshu.io/upload_images/2166980-4f0449e2077d3895.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
<
>
- ![](http://upload-images.jianshu.io/upload_images/2166980-e1a09725c15c26a4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- ![](http://upload-images.jianshu.io/upload_images/2166980-d72dc312ec48d4f2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- ![](http://upload-images.jianshu.io/upload_images/2166980-8726cd5c94bf76c9.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- ![](http://upload-images.jianshu.io/upload_images/2166980-4f0449e2077d3895.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
<
>
在线预览地址:https://github.com/have-not-BUG/task/blob/master/renwu/renwu35/renwu35-3.html
(四 )、使用构造函数创建对象的方式实现 Tab 切换功能
测试
- tab1
- tab2
- tab3
内容1
内容2
内容3
- tab1
- tab2
- tab3
内容1
内容2
内容3
在线预览地址:https://github.com/have-not-BUG/task/blob/master/renwu/renwu35/renwu35-4.html
**本文版权归本人即笔名:该账户已被查封 所有,如需转载请注明出处。谢谢! *