• JavaScript的一些记录


    1.关于{}与new的区别

    var obj = {
        name:'thunder',
        show:function(){
            console.log(this.name);
        }
    }
    //这种直接写{}的方式与var obj = new Object();是一个效果。
    //即{} 是new Object()的简写

    2.JavaScript是函数式编程语言,但是它有指针this存在,但它跟java中理解的this不太一样,会跳来跳去,导致难以理解。 

      this指针会指向实例化它的对象,而JavaScript的预处理(预加载)会首先实例化window对象,匿名函数、函数表达式、定义的变量都会实例化到window对象里。可以说window对象是全局环境里的上下文。

      改变this指针的几种方法:new、call、apply

    new操作符会执行以下四种动作:

      1.创建一个新对象、2.将构造函数的作用于赋给新对象(this指向它)、3.执行构造函数中的代码、4.返回这个对象(this)

    call和apply的作用是一致的,差别在于参数不同(第一个参数都是设定this指向对象的)。它们都可以改变函数的作用域(或者说函数执行的上下文)(可以简单的理解成this指针)。

      call和apply会将this指针指向第一个参数。也就是说A.method.call(B);那么执行的是A的方法method,但是里面的this指针指向的将是B对象。

      有一种比较复杂的场景:

    var obj = {
      name:'thunder',
      proxy:function(method){
        console.log(this);  
        method();
      }
    }
    var name = 'hello';
    var fun = function(){
      console.log(this);
      this.cry = function(){
        console.log(this.name+" is crying");
      };
    }
    <!--
    console 中输入:obj.proxy(fun);
    打印结果:
    Object {name: "thunder"}
    Window {external: Object, chrome: Object, document: document, obj: Object, speechSynthesis: SpeechSynthesis…}
    hello is crying
    
    可见对象中的方法,proxy中使用的this是指向对象obj的。但是proxy方法中传进来的method方法指向的确实window对象。因为fun方法是在window中加载的,
    method只是fun的一个别名而已。其实就是回调。
    而如果要使回调函数method执行中的this指向obj对象,可以使用call来调用,即 method.call(this);则method中this的指向就会变成obj对象。
    -->

    3.除了this指针,再记录一下构造函数、原型

      原型链的介绍,可以读一下这篇文章:http://www.mollypages.org/misc/js.mp

      最关键的是这张图:

      关于__proto__,在使用new初始化对象的时候,会赋给它一个隐藏的私有属性__proto__(在谷歌里虽然没有智能提示,但是却能访问到,好奇怪),而火狐引擎则将其暴露了出来。这个__proto__指向了初始化它的函数(这里没有说构造函数constructor,因为constructor虽然是初始化它的函数,但是在初始化完后会作为一个引用属性放到对象里,但其实并没什么卵用,可以当成别名来用)的prototype属性对象,当有一个属性在对象上没找到时,会查看他的__proto__属性对象(该类型初始化函数的Prototype对象)里的属性,如果还没有继续往上找直到找到,或者到最顶层Object.prototype的__proto__为null。这就是原型链。
      Function对象才有prototype属性,而Function的__proto__则指向了初始化Function对象的function Function的prototype,之后它的__proto__又指向的是初始化Object对象的function Object的prototype对象....

      说起来绕口,其实只要理解javascript里function也是对象的概念就好了。

    4.关于跨域

      在ajax中有一个叫做“同源策略”的规则,禁止访问非同源资源。(域名、端口、协议有一个不同就是非同源),而此时就有了jsonp方式跨域。json是一种数据结构,而jsonp是一种调用方法。jquery将jsonp封装到了ajax方法中,但其实它跟ajax从原理上就不一样,ajax使用的是XMLHttpRequest来进行异步请求,而jsonp方式,实际上是创建了一个script对象,来进行请求,而且这也是一个异步的动作。貌似带src属性的dom对象都是可以跨域请求的。

    var say = function(data){
      console.log(data)
    }
    var jsonp = function(config){
      var script = document.createElement("script");
      script.setAttribute("src","http://localhost:42000/practice-test/CommonServlet.html?callback=say");
      var body = document.getElementsByTagName("body")[0];
      body.appendChild(script); 
    }
    jsonp();
    alert('console');

      服务端代码这样返回:

    public class CommonServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp)
                throws ServletException, IOException {
            // 获得回调函数的名称,然后处理一些数据,然后做成javascript调用的格式,然后输出到页面上就可以了。
            String callback = req.getParameter("callback");
            String json = "{'name':'thunder','age':12}";
            resp.getWriter().print(callback+"("+json+");");
        }
    }

     5.关于delete操作符

      总之,它看的是该元素有没有dontdelete特性。

  • 相关阅读:
    自写 jQuery 大幅弹窗广告插件(不喜勿拍)
    反省:一个失败的产品
    javascript变量:全局?还是局部?这个得注意!
    前端工作常常会用到的一些经验技巧(三)
    Jquery伪选择器学习笔记
    前端工作常常会用到的一些经验技巧(二)
    (总结)工作中常用的js自定义函数——日期时间类
    js 数组引用 发现的问题
    一位资深程序员大牛给予Java初学者的学习路线建议(转)
    正则表达式
  • 原文地址:https://www.cnblogs.com/zaixiuxing/p/5245734.html
Copyright © 2020-2023  润新知