标准用法:

function Sprite(){
//函数内容部设置属性
this.name='shimily';
}
//原型上设置方法
Sprite.prototype.show=function(){
console.log(this.name);
}
//【尽量不要在原型上面添加公共属性】
//公共的属性或常量可以在原型上面设置
Sprite.prototype.PI=3.1415926;
var s = new Sprite();
s.show();

改进用法:

改进用法一:*************************

function Sprite2(name,age){
//函数内容部设置属性
this.name=name;
this.age=age;
}
//原型上设置方法
Sprite2.prototype.show=function(){
console.log(this.name);
} var s2 = new Sprite2('shimily1314',20);
s2.show();

改进方法二:*******************

function Sprite3(options){
//函数内容部设置属性
this.name=options.name;
this.age=options.age;
}
//原型上设置方法
Sprite3.prototype.show=function(){
console.log(this.name);
}
var s3 = new Sprite3({
name:'shimilygood',
age:20
});
s3.show();

最终常用方法:***************

function Sprite4(options){
//函数内容部设置属性
this._init(options);
} Sprite4.prototype._init=function(options){
this.name=options.name;
this.age=options.age;
this.color=options.color;
}
//原型上设置方法
Sprite4.prototype.show=function(){
console.log(this.name);
} var s4 = new Sprite4({
name:'shimilygood123',
age:20
});
s4.show();

【最好、最常用】

最终【优化版】常用方法:***************

function Sprite5(options){
//函数内容部设置属性
this._init(options);
} Sprite5.prototype={
_init:function(options){ //只允许内部调用的方法【仅内部调用】
this.name=options.name;
this.age=options.age || 20;
this.color=options.color || 'red';
console.log(this.name);
},
show:function(ele){ //[可以不加参数]外部可以调用的方法不使用下划线
console.log(this.name + ele);
} };
var s5 = new Sprite5({
name:'shimilygoodabc',
age:20
});
s5.show('yang');

王伟峰,图片轮播开发案例格式*******挺好用的

function Slider(container, opts){                        //属性设置
this.$outer = $(container);
this.$inner = this.$outer.children();
this.$prev = $(opts.prev);
this.$next = $(opts.next);
this.$els = this.$inner.children();
this.total = this.$els.length;
this.w = this.$els.outerWidth(true);
this.timer = null;
this.isSliding = false;
this.autoplay = opts.autoplay || false;
this.init(); //对外接口
}
var proto = Slider.prototype; //原型中封装方法
proto.init = function(){
var self = this;
var $last = this.$els.eq(this.total-1);
if(this.total<6){
$last = this.$els.clone().appendTo(this.$inner).eq(this.total-1);
this.total *= 2;
}
$last.prependTo(this.$inner);
this.$inner.css('marginLeft', -this.w);
console.log(this.$next)
this.$prev.on('click', function(){
self.prev();
})
this.$next.on('click', function(){
self.next();
})
this.$outer.on('mouseenter', function(){
clearTimeout(self.timer);
})
this.$outer.on('mouseleave', function(){
self.auto();
})
this.auto();
}
proto.prev = function(){
if(this.isSliding) return;
this.isSliding = true;
var self = this;
this.$inner.animate({
marginLeft: 0
}, 500, function(){
self.$inner.children().eq(self.total-1).prependTo(self.$inner);
self.$inner.css('marginLeft', -self.w);
self.isSliding = false;
})
}
proto.next = function(){
if(this.isSliding) return;
this.isSliding = true;
var self = this;
this.$inner.animate({
marginLeft: -this.w*2
}, 500, function(){
self.$inner.children().eq(0).appendTo(self.$inner);
self.$inner.css('marginLeft', -self.w);
self.isSliding = false;
})
}
proto.auto = function(){
if(!this.autoplay) return;
var self = this;
function delay(){
self.timer = setTimeout(function(){
self.next();
delay();
}, 5000)
}
delay();
} //实例化
new Slider('.slideOuter',{
prev: '.prev',
next: '.next',
autoplay: true
});

js★★★【面向对象的使用方法】*****************★★★★ 相当重要的更多相关文章

  1. js面向对象 多种创建对象方法小结

    转自js面向对象 多种创建对象方法小结 1.对象字面量 var clock={ hour:12, minute:10, second:10, showTime:function(){ alert(th ...

  2. js面向对象的使用方法

    标准用法: function Sprite(){ //函数内容部设置属性 this.name='shimily'; } //原型上设置方法 Sprite.prototype.show=function ...

  3. js面向对象的封装方法,【案例】

    封装方法: /** * @矩形canvas库 * @authors Shimily (275766400@qq.com) * @date 2016-12-28 10:30:51 * @version ...

  4. JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  5. js面向对象+一般方法的选项卡

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js面向对象之公有、私有、静态属性和方法详解

    现下,javascript大行其道,对于网站开发人员来说,javascript是必需掌据的一门语言,但随着jquery等框架的流行和使用,许多人对于原生javascript缺乏深入的理解,习惯了函数式 ...

  7. js面向对象自定义MyString()的构造器函数,实现内建String()属性和方法:

    js面向对象自定义MyString()的构造器函数,实现内建String()属性和方法: var s = new MyString('hello'); s.length; s[0]; // " ...

  8. JS面向对象编程,对象,属性,方法。

    document.write('<script type="text/javascript" src="http://api.map.baidu.com/api?v ...

  9. js面向对象初步探究(上) js面向对象的5种写方法

    非常长一段时间看网上大神的JS代码特别吃力.那种面向对象的写法方式让人看得云里来雾里去.于是就研究了一下JS面向对象.因为是初学,就将自己在网上找到的资料整理一下,作为记忆. js面向对象的5种写方法 ...

  10. JavaScript---正则使用,日期Date的使用,Math的使用,JS面向对象(工厂模式,元模型创建对象,Object添加方法)

    JavaScript---正则使用,日期Date的使用,Math的使用,JS面向对象(工厂模式,元模型创建对象,Object添加方法) 一丶正则的用法 创建正则对象: 方式一: var reg=new ...

随机推荐

  1. 虚拟现实外包—动点飞扬软件专门承接VR/AR场景、游戏、项目外包

    VR外包AR外包公司(虚拟现实外包公司)承接虚拟现实项目开发(企业.教育.游戏.企业大数据展示等) 有VR/AR.Unity3D项目.游戏外包业务欢迎 联系我们 QQ:372900288 TEL:13 ...

  2. canvas 水波纹

    <!DOCTYPE html> <html> <head> <title>水波背景</title> <meta charset=&qu ...

  3. CSS布局(圣杯、双飞翼、flex)

    圣杯布局(float + 负margin + padding + position) <!DOCTYPE html> <html> <head> <meta ...

  4. js实现bind方法

    //目标函数 function fun(...args) { console.log(this); console.log(args); } //目标函数原型对象上的一个方法cher func.pro ...

  5. expect简单自动交互-用于密码、命令输入

    1. 安装expect #yum -y install expect 2. 新建.exp文件,用于ssh交换机 #vi exp.exp #!/bin/expect set f [open ipfile ...

  6. sysbench工具安装使用

    一.sysbench简介 Sysbench是一款开源的.跨平台的.模块化的.多线程的性能测试工具,通过高负载地运行在数据库上,可以执行CPU.内存.线程.IO.数据库等方面的性能测试.用于评估操作系统 ...

  7. SpringBoot使用日志

    1.日志框架 日志门面 日志实现 JCL.SLF4J.jboss-logging Log4j.JUL.Log4j2.Logback 日志门面:SLF4J 日志实现:Logback SpringBoot ...

  8. C#流程控制语句--迭代语句(while,do....while, for , foreach)

    迭代语句:有的时候,可能需要多次执行同一块代码.函数中的第一个语句先执行,接着是第二个语句,依此类推. 迭代语句:while(先检查后执行) while(条件表达式 bool类型) { 代码语句 } ...

  9. 微信和QQ内置浏览器为什么老是弹停止访问该网页,微信域名被屏蔽的解决办法

    近来很多商家开始重视域名防封的技术了,为什么呢,因为实在是封怕了.三天两头就得去换域名,换域名是小事,用户流失就是大事了,直接跟利益挂钩的.那么域名防封技术究竟有多重要呢?又该如何实现域名防封呢?下面 ...

  10. 依赖注入框架Ninject

    为什么需要依赖注入 我们提到MVC的一个重要特征是关注点分离(separation of concerns).我们希望应用程序的各部分组件尽可能多的相互独立.尽可能少的相互依赖. 我们的理想情况是:一 ...