侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

javascript继承模式,Function模式,对象创建模式

2024-05-13 星期一 / 0 评论 / 0 点赞 / 83 阅读 / 6181 字

原型继承 //继承function inherit(obj){ var F = function(){} F.prototype = obj; return new F();}var pa

原型继承

//继承function inherit(obj){   var F = function(){}   F.prototype = obj;   return new F();}var parent = {name:'张三', say: function(){console.log(this.name);}}var child = inherit(parent);child.say(); //张三var Person = function(){    this.name = '张三';}Person.prototype.say = function(){    console.log(this.name);}var student = inherit(new Person())student.say();//ECMAScript 5提供了上面inherit方法的功能var child = Object.create({name:'张三', say: function(){console.log(this.name);}});

借用方法

var parent = {   name: '张三',   say: function(){       console.log(this.name);   }}var child = {    name:'李四'}//借用parent的say方法parent.say.apply(child);  //李四

立即执行函数

//立即执行函数(function(){console.log(123)}())(function(){console.log(123)})()!function(){console.log(123)}();+function(){console.log(123)}();-function(){console.log(123)}();~function(){console.log(123)}();

立即初始化对象

({    name: '张三那',    say: function(){        return this.name;    },    init: function(){        console.log(this.say());    }}).init();

命名空间

我们一般这么定义

var app = app || {};app.moduleA = app.moduleA || {};app.moduleA.subModule = app.moduleA.subModule || {};app.moduleA.subModule.MethodA = function () {    console.log("print A");};

如果层级很多呢?这样一直下去会很乱

var MYAPP = MYAPP || {};//定义通用方法MYAPP.namespace = function (ns_string) {    var parts = ns_string.split('.'),        parent = MYAPP,        i;    // 默认如果第一个节点是MYAPP的话,就忽略掉,比如MYAPP.ModuleA    if (parts[0] === "MYAPP") {        parts = parts.slice(1);    }    for (i = 0; i < parts.length; i += 1) {        // 如果属性不存在,就创建        if (typeof parent[parts[i]] === "undefined") {            parent[parts[i]] = {};        }        parent = parent[parts[i]];    }    return parent;};//使用方法MYAPP.namespace('a.b.c.d.e.f.g.h')console.log(MYAPP);

定义依赖

有时候你的一个模块或者函数可能要引用第三方的一些模块或者工具,这时候最好将这些依赖模块在刚开始的时候就定义好,以便以后可以很方便地替换掉。

var myFunction = function () {    // 依赖模块    var event = YAHOO.util.Event,        dom = YAHOO.util.dom;    // 其它函数后面的代码里使用局部变量event和dom};

隐藏私有方法模式

var myapp  = (function(){    var name = '张三';    var sayMyName = function(){          console.log(name);    };        return {       say:sayMyName      }}())myapp.say();

链模式

链模式可以你连续可以调用一个对象的方法,比如obj.add(1).remove(2).delete(4).add(2)这样的形式,其实现思路非常简单,就是将this原样返回。

var obj = {    value: 1,    increment: function () {        this.value += 1;        return this;    },    add: function (v) {        this.value += v;        return this;    },    shout: function () {        console.log(this.value);    }};// 链方法调用obj.increment().add(3).shout(); // 5// 也可以单独一个一个调用obj.increment();obj.add(3);obj.shout();

函数语法糖

函数语法糖是为一个对象快速添加方法(函数)的扩展

if(typeof Function.prototype.method !== 'function'){	Function.prototype.method = function(name, func){			this.prototype[name] = func;		return this;	}	}var Person = function(name){	this.name = name;}.method('get', function(){	return this.name;}).method('set', function(value){	this.name = value;});var a = new Person('张三');console.log(a.get());console.log(a.set('李四'));console.log(a.get());

对象的深度克隆。

var man = {	name:{		realname: '张三',		nick:'rick'	},	age: 18,	address:['中国', '美国', '澳大利亚']}var clone = function(obj){	var result, b;	if((b = (obj instanceof Array)) || obj instanceof Object){		result = b ? [] : {};		for(var k in obj){			result[k] = (obj[k] instanceof Array || obj[k] instanceof Object) ? clone(obj[k]) : obj[k];		}	}	else{		result = obj;	}	return result;}var man2 = clone(man);man2.name.realname = '李四'console.log(man.name.realname); // 张三

为对象扩展方法:

(function(){	var xQuery = (function(){		var xQuery = function(){					return xQuery.fn.init();				};        //xQuery.fn 为对象定义别名,暂时没用		xQuery.fn = xQuery.prototype = {			init: function(){				return this;			}		};        //xQuery.fn.extend 为方法定义别名,暂时没用		xQuery.extend = xQuery.fn.extend = function(){			var options, name, src, copy,				target = arguments[0] || {},				i = 1,				length = arguments.length;			if(length === i){				target = this;				--i;  //不执行后面循环			}			for(; i < length; i++){				if((options = arguments[i]) != null){					for(name in options){						src = target[name];						copy = options[name];												if( src === copy ){							continue;						}						if( copy !== undefined ){														target[name] = copy;												}										}								}						}			return target;				}		return xQuery;	}());	window.xQuery = window.$ = xQuery();}());$.ui = $.ui || {};$.extend($.ui, {name: 'php', getName: function(){ return this.name;}});console.log($.ui.getName());

 

广告 广告

评论区