js 杂记

最新推荐文章于 2024-09-11 15:33:18 发布

WZTTMoon

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量124

点赞数

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/TheThirdMoon/article/details/131311116

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细讲解了JavaScript中的this指向问题，包括函数调用、构造函数、原型链、对象实例等场景。还讨论了函数的apply和call方法、事件处理、Ajax、模块化设计、闭包以及单页应用的注意事项。此外，提到了变量声明提升、块级作用域以及let和const的使用。

摘要由CSDN通过智能技术生成

this指向

  function child2(){//属于window
        parent.call(this);
        console.log(this);
    }

    var c2=new child2();
    console.log(c2.name);//this指的是c2
    child2();//this指的是window

    function p(){
        function p1(){
            console.log(this);
        }
        p1();
    }
    p();//this指的是window

    p.p2=function(){
        console.log(this);
    }
    p.p2();//this指的是p

    function k(){        
    }
    k.p2=p.p2;
    k.p2();//this指的是k

this，谁调用的指向就是谁，这个“谁"可以是任何定义（在内存中一块有效的区域），函数，对象，window等

__proto__


    function p(){

    }
    var obj={__proto__:p.prototype};
    console.log(obj);//实际上obj变为了p对象
    var pobj=new p();
    console.log(pobj);//pobj和obj都是p对象，区别在于pobj执行了p函数，而obj没有

只要一个对象的__proto__指向某个函数fn的prototype，则该对象变为fn对象

prototype

function a(){
        this.name="a";
    }
    a.prototype.print=function(){

    };
    var b=new a();
    var c=new a();
    console.log(b.__proto__==c.__proto__);//ture
    console.log(c.__proto__==a.prototype);//true
    console.log(b==c);//false

每个js对象或函数都有一个内置的[[Prototype]]属性，可以通过 .__proto__来访问
只有function 有一个prototype属性其是一个对象
每个new 的js对象的[[Prototype]]都指向了其函数的prototype属性，所以prototype属性是被对象共享的

  第一种写法
    function a(){
        this.name="a";
    }
    a.prototype.print=function(){

    };
    第二种写法
    function a(){
        this.name="a";
        this.print=function(){

         }
    }

第一种写法的print函数被所有实例共享
第二种写法的print函数，每个实例都复制了一份，浪费了内存资源

function a(){
    this.fn=function(){
    };//a的所有实例都会有该方法的一个拷贝。
}
a.fn=function(){
};//fn是a的私有方法
a.prototype.fn=function(){
};//fn被a的所有实例共享

js执行顺序

<script> 代码块之间独立（一个代码块报错不会影响其他代码块），但共享变量和方法

js的解析过程分为两个阶段：预编译期(预处理)与执行期。预编译期处理所有声明的变量（未初始化）和声明式函数（function fun(){}）进行处理。

<script type="text/javascript">
      fn();  //执行结果：1,在预编译期声明函数及被处理了，所以即使fn()调用函数放在声明函数前也能执行。
      function fn(){ //声明式函数
         alert("1");
      }
      var fn = function(){  //赋值式函数
         alert("2");
      }
</script>

Js apply 和 call

这两个方法都可以改变this的指向

可以为对象增加方法和属性

    function a(){
      this.p=1;
      this.fn=function(){
          alert(1);
      }
   }
   function b(){}
   a.apply(b);//b就有了p属性和fn方法
   b.fn();

apply和call区别是，apply可以用在参数不定的情况

function f1(name,age) {
    alert(name+age);
}
f2() {
    f1.apply(this,arguments);//arguments代表传入的参数数组
}
f2("123");//js特性，并不要求调用时参数要符合函数声明

字符串转数字
- parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；可以进行部分转换，如 parseInt("1234blue"); //returns 1234；
- Number(value)：把给定的值转换成数字（可以是整数或浮点数）；

闭包
主要用于模块化，模块内的变量不会被其他模块访问

function a(){
      var i=0;
      function b(){
        alert(++i);
      }
      return b;
    }

a是模块，b是模块提供的功能

null 和 undefined
null 是个值，只能人为的赋予。undefined 则表示所有未初始化的变量

console.log(window.c);//结果：undefined，window.c是个变量声明，而且未初始化
 console.log(function fn(){});//结果：ƒ fn(){}，fn是个函数声明
 console.log(c);//会报错，因为没法这样声明一个变量c
 
  window.c=null;
  console.log(window.c);//结果：null，只有赋值null，结果才能是null

setInterval 设定时间后，第一次执行前就会等待设定的时间，所以感觉会有一个延迟。
所有末定义（没有var）直接赋值的变量自动声明为拥有全局作用域

给未来元素加事件(jquery 1.9去掉了live 都用on代替)

 $(document).on("click", ".item", function(){//必须是document
        事件元素
     });

javascript:window.history.go(-1)
浏览器的后退功能
ajax无法处理重定向

判断设备

            var ua = navigator.userAgent.toLowerCase();
            var isWeixin = ua.indexOf('micromessenger') != -1;
            var isAndroid = ua.indexOf('android') != -1;
            var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);

非法属性名操作

var params0={
          "ww.aa":1,   //ww.aa属于非法变量名，必须加“”取值的时候只能用 对象变量名["ww.aa"]取值
            cc:2
          };
 alert(params0["ww.aa"]);

jsonp只能是异步的
js只能设置cookie的域为当前网站所在的域。
window的作用域在当前页面，通过超链接跳到其他页面后window为新的window。
disabled的input不会被$.serilize()方法序列化
对象是地址传递

$(".post-form md-radio-button").on( 'click',function());
$(".post-form").on( 'click',"md-radio-button ",function());
$(".post-form md-radio-button").off();只对第一种形式管用;

在Android手机浏览器中获取高和width最好用
window.innerHeight
window.innerWidth
谷歌浏览器
如果一个js被重复引用n次
那么当事件出发时会重复执行n次
立即执行函数的写法
- (function() {})();
- (function() {}());

clone复制问题

var $temp = $tickettpl.clone();
            var count=$( ".tickets-tpl").length;
          $temp.find( "input[data='costType']").attr("name" ,"costType" +count);
           $temp.insertAfter( ".tickets-tpl:last");
           $temp.find( ".del").attr( "data-id", "");
           $temp.find( "input[data='minBuy']").val(1);
           $temp.find( "input[data='frequency']").val(1);
          $temp.find( "input[data='id']").addClass("no-vaildate-empty" );
           $temp.show();

对temp的操作要插入到dom之前进行。否则会出现一些莫名其妙的问题。

:has()匹配的是后代元素
$(function() {})文档加载完成，不包括其他文件如js,css,图片
window.onload=function(){};浏览器加载完成，包括各种文件，（浏览器不在转圈时）
“”==0为true
有的时候会出现某个方法找不到的情况。
可能的原因：如果你需要多个相互之间有依赖关系的js文件，那么可能是你导入的文件的顺序不对。
有的时候当js提示你某个元素没有定义时或找不到时，
原因1：应该看看你的js代码中是不是取了某个不存在的标签属性。
原因2：导入的js文件的路径不对。
有时jquery的attr可以获得的值，prop却获得不到。赋值时同样也是。

jquery 判断checkbox选中状态用$(checkbox).is(":checked")=true/false;

     if(text=="全选")
     {
       $(".isDivide").attr("checked",true);
       $(".isDivide").prop("checked",true);
        text="全不选";
     }else{
       $(".isDivide").attr("checked",false);
       $(".isDivide").prop("checked",false);
       text="全选";
     }

iphone 最好不要用on绑定事件，特别是未来元素，也不要用 $(d oc u m e n t) 和$ (“body”)
$(selector1).delegate(selector2,event,function);
selector1不能是未来元素,document,body
单机标签自动提交表单问题
请始终为规定 type 属性。Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”。
事件
Dom事件默认是向上冒泡的，发生在子节点中的事件，可以由父节点来处理。Event的 target/srcElement 仍是产生事件的最深层子节点。这样，对于内容动态增加并且子节点都需要相同的事件处理函数的情况，可以把事件注册上提到父节点上，这样就不需要为每个子节点注册事件监听了。同时，这样做也避免了产生无法回收的内存。即使是用Prototype的observe方式注册事件并在删除节点前调用stopObserving，也会产生出少量无法回收的内存，所以应该尽量少的为dom节点注册事件监听。
js的对象属性会自动排序类似java map的key
window.btoa(unescape(encodeURIComponent(s)))，输出base64编码
function 的toString();返回的是function的源码
A.m 这个方法属于A并不属于A的对象
function A(){};A.m=function(){};var a=new A();a.m();//会报错

声明提升
JavaScript 将所有声明提升到当前作用域顶部的默认行为（提升到当前脚本或当前函数的顶部）

var tmp = new Date();
function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';//var temp;被提升到f()中最上位置，结果temp为undefined
  }}
f(); // undefined

等同于如下代码

var tmp = new Date();
function f() {
  var tmp;//temp提升到此处
  console.log(tmp);
  if (false) {
    tmp = 'hello world';
  }}
f(); // undefined

es6之前只有全局域和函数域，没有块作用域。es6 let实际上为 JavaScript 新增了块级作用域。 ES6 规定，块级作用域之中，函数声明语句的行为类似于let，但是，如果改变了块级作用域内声明的函数的处理规则，显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题，ES6 在附录 B里面规定，浏览器的实现可以不遵守上面的规定，有自己的行为方式。
- 允许在块级作用域内声明函数。
- 函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
- 同时，函数声明还会提升到所在的块级作用域的头部。
注意，上面三条规则只对 ES6 的浏览器实现有效，其他环境的实现不用遵守
最好使用let和const，因为其更符合大多数语言的习惯。不再使用var 。
单页应用
- 单页应用内引入的节点id或class等有业务相关的表示应该加上模块名前缀，避免其他模块内可能出现的同名节点标识相互影响
- 模块所引入的节点应该在模块节点内，这样可以保证模块切换时，动态引入的节点也可以同时被清除
script标签的onload事件都是在外部js文件被加载完成并执行完成后才被触发的

WZTTMoon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 杂记

这样，对于内容动态增加并且子节点都需要相同的事件处理函数的情况，可以把事件注册上提到父节点上，这样就不需要为每个子节点注册事件监听了。ES6 规定，块级作用域之中，函数声明语句的行为类似于let，但是，如果改变了块级作用域内声明的函数的处理规则，显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题，ES6 在附录 B里面规定，浏览器的实现可以不遵守上面的规定，有自己的行为方式。this，谁调用的指向就是谁，这个“谁"可以是任何定义（在内存中一块有效的区域），函数，对象，window等。
复制链接

扫一扫

专栏目录