JS笔记

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS笔记相关的知识,希望对你有一定的参考价值。

---this 作用域----------------------------------------------------

一、

var foo = {

    bar: function() { return this.baz; },

    baz: 1

  };

  (function(){

    return typeof arguments[0]();

  })(foo.bar);


考察this作用域的问题,

        var foo = {

    bar: function() { console.log(this);return this.baz; },

    baz: 1

  };

  foo.bar();如果代码是这样的,这个时候的this是指向foo这个json对象;

var foo = {

    bar: function() { console.log(this);return this.baz; },

    baz: 1

  };

  (function(){

    return typeof arguments[0]();

  })(foo.bar);如果如题目中这样,相当于代码:

(function(){

    return typeof arguments[0]();

  })(function() { console.log(this);return this.baz; });

,this则是指向foo定义的函数function(){}这个匿名函数对象,而这个匿名函数的baz变量又没有定义,所以答案就是"undefined",也就是:A

PS:区分foo这个json对象,与匿名函数function(){}中的this.baz指向不同的值。

二、

------------------------------------------------------

var name = "The Window";   

  var object = {   

    name : "My Object",   

    getNameFunc : function(){   

      return function(){   

        return this.name;   

     };   

    }   

};   

alert(object.getNameFunc()());  //The Window

三、

var name = "The Window";

var object = {

      name : "My Object",

      getNameFunc : function(){

          alert(‘1.‘ + this.name);

          return function(){

              return this.name;

          };

      }

};

var func = object.getNameFunc();  //My Object

alert(‘2.‘ + func());  //My Object  The Window

alert(‘3.‘ + func.call(object)); //My Object  My Object

alert(‘4.‘ + func.apply(object));//My Object  My Object

//2.The Window 其它都是My Object


// return--------------------------------------------


var Singleton = (function () {

    var instantiated;

    function init() {

        /*这里定义单例代码*/

        return {

            publicMethod: function () {

                console.log(‘hello world‘);

            },

            publicProperty: ‘test‘

        };

    }


    return {

        getInstance: function () {

            if (!instantiated) {

                instantiated = init();

            }

            return instantiated;

        }

    };

})();


/*调用公有的方法来获取实例:*/

Singleton.getInstance().publicMethod();

// return----------------------------------------------



// JS 后面的参数----------------------------------------------

//src="http://feeds.delicious.com/v2/json/codepo8/javascript?count=5&callback=delicious"


// ()()----------------------------------------------

(function(t){

 //code

})(aa)



// UglifyJS ----------------------------------------------

RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩。r.js非常强大,不但可以压缩js,css,甚至可以对整个项目进行打包。


r.js的压缩工具使用UglifyJS或Closure Compiler。默认使用UglifyJS(jQuery也是使用它压缩)。此外r.js需要node.js环境,当然它也可以运


行在Java环境中如Rhino。



// require  shim exports  deps----------------------------------------------

六、加载非规范的模块


理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。但是实际上,虽然已经有一部分流行的函数库(比如jQuery


)符合AMD规范,更多的库并不符合。那么,require.js是否能够加载非规范的模块呢?回答是可以的。这样的模块在用require()加载之前,要先


用require.config()方法,定义它们的一些特征。举例来说,underscore和backbone这两个库,都没有采用AMD规范编写。如果要加载它们的话,


必须先定义它们的特征。


  require.config({


    shim: {


      ‘underscore‘:{

        exports: ‘_‘

      },


      ‘backbone‘: {

        deps: [‘underscore‘, ‘jquery‘],

        exports: ‘Backbone‘

      }


    }


  });


require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。具体来说,


每个模块要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性。


比如,jQuery的插件可以这样定义:


  shim: {


    ‘jquery.scroll‘: {


      deps: [‘jquery‘],


      exports: ‘jQuery.fn.scroll‘


    }


  }


// 详解js中typeof、instanceof与constructor---------------------------------------------

http://www.cnblogs.com/walkingp/archive/2009/09/18/1568912.html

typeof返回一个表达式的数据类型的字符串,返回结果为js基本的数据类型,包括number,boolean,string,object,undefined,function.语法为


typeof(data) 或 typeof data


instanceof则为判断一个对象是否为某一数据类型,或一个变量是否为一个对象的实例;返回boolean类型

语法为 o instanceof A


---------------------------------------------

var baz;


(function(){


var foo = 10;


var bar = 2;


var baz = function(){

return foo * bar;

};


})();


baz();

-------------------------------------------------------

<script type="text/javascript">

        

            function createFunctions(){

                var result = new Array();

                

                for (var i=0; i < 10; i++){

                    result[i] = function(num){

                        return function(){

                            return num;

                        };

                    }(i);

                }

                

                return result;

            }

            

            var funcs = createFunctions();

            

            //every function outputs 10

            for (var i=0; i < funcs.length; i++){

                document.write(funcs[i]() + "<br />");

            }


        </script>

10

.

.

.

.10


----

单例要考察我们的东西有很多,比如私有构造函数,静态构造函数,静态字段,readonly和const的区别等等

---------------------------------------------------


单例的优点:

1.保证了所有的对象访问的都是同一个实例

2.由于类是由自己类控制实例化的,所以有相应的伸缩性


单例的缺点:

1.额外的系统开销,因为每次使用类的实例的时候,都要检查实例是否存在,可以通过静态实例该解决。

2.无法销毁对象,单例模式的特性决定了只有他自己才能销毁对象实例,但是一般情况下我们都没做这个事情。

---------------------------------------------------


事件委托是什么

让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!


-------------------------------------------------------

连续英文换行

.content p{word-wrap:break-word;word-break:break-all;}

-------------------------------------------------------


5、

a:JS克隆对象,我也没答上来。。。原生JS太菜啊

网上搜索了一下,找到一个这样的函数:

function Object.prototype.cloneObj()

{

  function NEWOBJECT(){};

  NEWOBJECT. prototype = this;

  var anObj = new NEWOBJECT();

  for ( var ele in anObj )

  {

     if ( typeof anObj[ele] == “object” ) return anObj[ele]. cloneObj();

  }

  return anObj;

}

(没有看懂。。。)

b:这个消除数组里面重复的元素,我想到的就是双循环+判断来做的,当时的答案如下:

function getNewArr(oldArr){

if(typeof oldArr != "object") return oldArr;

var newArr = [];

var oldArrLen = oldArr.length-1, newArrLen = -1, flag = false;

for(var i=oldArrLen; i>=0; i--){

  flag = false;

  for(var j=newArrLen; j>=0; j--){

   if(oldArr === newArr[j]){

    flag = true;

    break;

   }

  }

  if(!flag) newArrLen = newArr.push(oldArr)-1;

}

return newArr;

}


var arr=[1,2,3,4,6,5,5,4,3,2,4,5,2,1,2,3,4,5,6];

    function getNewArr(arr){

        var obj={},newArr=[];

        for(var i=0;i<arr.length;i++){

            if(obj[arr[i]]!=arr[i]){

                newArr.push(arr[i]);

                obj[arr[i]]=arr[i];

            }else{

                obj[arr[i]]=arr[i];

            }

        }

        return newArr;

    }

    console.log(getNewArr(arr));

这是我能想到的办法。。。其他的没想到。

-------------------------------------------------------


search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。

var str="Mr. Blue has a blue house"

var n=str.search(/blue/i);

document.getElementById("demo").innerHTML=n;


exec();

var r, re; // 声明变量。 

var s = "The rain in Spain falls mainly in the plain"; 

re = /[\w]*(ai)n/ig; 

r = re.exec(s); 

alert(r); 


以上是关于JS笔记的主要内容,如果未能解决你的问题,请参考以下文章

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

js代码片段: utils/lcoalStorage/cookie

JS代码片段:一个日期离现在多久了

js常用代码片段(更新中)