继承模式 命名空间和对象枚举

实现继承的最好方式,A继承自B ,A的改变又不影响到B

圣杯模式

function inherit(Target,Origin){

  function Fn(){};   //中转函数

  Fn.prototype = Origin.prototype;

  Target.prototype =new Fn();  //目标函数继承自中转函数的构造函数

  Target.prototype.construct = Target;  //使目标函数的construct指向自身

  Target.prototype.uber = Origin.prototype; //保存目标函数的超级父类

}

function Father(){};

inherit(Son,Father);

var father =  new Father();

var son = new Son();

实现变量的复用

1 全局变量

2 闭包(解决变量污染,实现私有化变量)

var name = 'pillar';

var init=(function(){

  var name = 'xudan';

  function callName(){

    cosole.log(name);

  }

  return function(){  //作为函数返回存到外部函数里

    callName();

  }

}());

init();

 

中括号实现属性的拼接

var deng = {

  wife1 : {name : "wife"},

  wife2 : {name : "xiaosan"},

  wife3 : {name : "xiaosi"},

  wife4 : {name : "xiaowu"},

  sayWife:function(num){

    return this['wife'+num];

  }

}

在遍历对象枚举的过程中,必须使用中括号进行遍历

var obj = {

  name : 'dan',

  sex : 'girl',

  age : 18

}

for(var key in obj){

  console.log( obj.key );//undefined   解析过程 : obj.key ==> obj['key']

  console.log(obj[key]);//这样是可以的

}

遍历某个特定属性时则要采用 obj['key']

 

实现像jquery那样连续的调用

var Dom={

  cute:function(){

    console.log("you are so cute");

  },

  hard:function(){

    console.log("you must be so hard");

  }

}

如何实现连续的调用呢?

Dom.cute().hard(); 

这样肯定是会报错的,调用一次后返回值是undefined,再次调用肯定报错

解决办法:

var Dom={

  cute:function(){

    console.log("you are so cute");

    return this;

  },

  hard:function(){

    console.log("you must be so hard");

    return this;

  }

}

Dom.cute().hard(); //这样即可实现链式调用

css筛选操作

$("#box").addClass("show").filter(function( index ){

    return index==1 || $(this).attr("id")=="d3"

  }).addClass("c2");

})

.end()找到当前结果集的上一集

.endself()找到当前结果集和上一级

例如:

$("#box").childern("span").addClass("show").end().css("color":red);//这时候操作的就是box的字体颜色

$("#box").childern("span").addClass("show").endself().css("color":red);//这时候操作的就是box和span的字体颜色

 

A instanceof B 的具体含义就是看A的原型链上有没有B的原型

判断引用类型的具体类型

var   a = [] || {}?具体怎么判断

方法一

[].constructor    // function Array(){}

{}.constructor   //报错

方法二

[].instanceof Array   // true

var obj = {};

obj.instanceof Array   // false

方法三

object.prototype.toString = function(){

  //识别this

  //返回对应的结果

}

object.prototype.toString.call( [] ); // [object Array]

object.prototype.toString.call( 123 ); // [object Number]

object.prototype.toString.call( {} ); // [object Object]

深度克隆

var obj={

  name:'xudan',

  age:18,

  card:['visa','unionpay'],

  bf:{

    name:'pillar',

    son:{

      name:'mimi'

    }

  }

}

var obj1={};

遍历对象  for( var prop in origin)

1 判断是不是原始值,是的话直接赋值 typeof(origin[prop])=="object"

2 判断是数组还是对象 Object.prototype.toString.call(origin[prop]) == "[object Array]";

3 建立相应的对象和数组

递归

function deepClone(origin,targe){

  var target = target || {};

  var toStr = Object.prototype.toString;

  var arrStr = "[object Array]";

  for( var prop in origin){

    if(origin.hasOwnproperty[prop]){

      if(origin[[prop] !== 'null' && typeof(origin[prop])=="object"){

        if(toStr.call(origin[prop]) == arrStr ){

          target[[prop] = [];

        }else{

          target[[prop] = {};

        }

        deepClone(origin[prop],target[prop]);

      }else{

        target[[prop] = origin[[prop];

      }

    }

  }

  return target;

}

听了两节视频,觉得受益匪浅,所以把一些总结写到了这里来,希望自己能渐渐地融会贯通用到自己的项目里。

posted @ 2018-03-09 13:42  徐念念  阅读(173)  评论(0编辑  收藏  举报