js基础知识

知识点
1、js变量必须以：英文字母、_、$开头

2、可以直接在控制台输出变量的名字，而不用打印console.log()

3、++ -- 运算符

var a = 10;

console.log(a++);        //10        先打印后a++

console.log(a);            //11    

console.log(++a);        //11        先++a后打印

console.log(a)             //11

4、任何数据类型加字符串都等于字符串

5、undefined、null、NaN、0、false、' ' =>false

6、短路语句：2 > 1 && console.log('打印'); //打印

7、isNaN( ) //是否是NaN

8、编程原则：高内聚，弱偶合

9、函数声明：

function test(){

}

10、函数表达式：

var test = function abc(){

}

var test = function (){

}

11、函数实参形参长度

function sum(a,b,c,d,e){

}
sum(1,2,3,4,5)

//    sum.length                 实参的长度
//    argumens.length        形参的长度

12、js编译过程三部曲：①语法分析 ②预编译 ③编译执行

13、函数声明整体提升、变量声明提升

14、一切声明的全局变量都是window的属性

15、预编译：函数体里的预编译：AO对象 Activation Obiect （执行期上下文）

① 创建AO对象
② 找形参和变量声明，将变量和形参作为AO属性名，值为undefined
③ 将实参值和形参值统一
④ 在函数体里面找函数声明，值赋予函数体
AO{

}
全局的预编译：GO对象 Global Object （全局的执行上下文）

16、作用域精解：

运行期上下文，当函数执行时，会创建一个执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时的环境，函数每次执行时对应的执行上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行期上下文，当函数执行完毕，它所产生的的执行期上下文被销毁。

17、立即执行函数:

(function (){
    console.log('立即执行函数');
}());

推荐大括号包裹在里面

18、对象删除方法

let obj = {
        a:1,
        b:2,
        c:function(){
            alert('hello');
        }
    }
delete obj.a    //删除obj.a的属性

19、构造函数

function Fun(name){
    this.name = name;
    this.say = function(){
        alert(this.name)
    }
}
let fun = new Fun('播求');
//  fun就是一个对象
① 在函数的最前面隐式的加上一个空对象 var this = {};
② 执行this.xxx = xxx;
③ 隐式的返回this    return this

20、原型
原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。
利用原型的特点和概念，可以提取共有属性。

Fun.prototype.name = 'heihei';    //所有这个构造函数的对象上都继承这个属性
Fun.prototype.say = function(){    //所有这个构造函数的对象上都继承这个方法
  alert('yo~');
}
function Fun(){
  this.name = 'xu';    //自己身上有属性就用自己的
}
let fun = new Fun();
//访问原型的对象 Fun.prototype    是原型的对象
//修改原型的对象就是  Fun.prototype.name = 'yo'

另一种写法：

Fun.prototype = {
  height:1400,
  lang:4900
}
function Fun(){
}
let fun = new Fun();

构造器

fun.constorctor    //function Fun(){
}    //指向的是构造它的那个构造函数

proto

//在构造函数的时候就隐式的创建了__proto__
function Fun(){
    //var this = {
        //__proto__:Fun.prototype
    }
}

21、call和apply

function Fun(a,b){
  this.a = a;
  this.b = b;
}
let fun = new Fun(1,2);
console.log(fun)    //{a:1,b:2}

let obj = {
}
Fun.call(obj,100,200)
console.log(obj)    //{a:100,b:200}

  function Student(age,name){
            this.age = age;
            this.name = name;
        }

        function Person(age,name,height){
            Student.call(this,age,name);
            this.height = height;
        }

        let fun = new Person(18,'徐俊杰',180)

        console.log(fun)

call需要把实参按照形参的个数传进去
apply需要传一个agguments

22、继承模式，命名空间，对象枚举

let fun = {
            a(){
                console.log('a')
                return this
            },
            b(){
                console.log('b')
                return this
            },
}

fun.a().b()    //链式调用  a b

function Fun(a){
            this.a = a;
            this.b = function(){
                console.log(this.a)
                return this
            };
            this.c = function(){
                console.log(this.a + 'ccccccc')
                return this
            }
}

let fun = new Fun('aaaaa')
fun.b().c()      //aaaaa   aaaaaccccccc

23、属性的访问方法

let obj = {
  name:'xujunjie'
}
方法一：obj.name    //xujunjie
方法二：obj['name']    //xujunjie

24、hasOwnProperty
判断对象的属性是否是自己的，如果是原型身上的就不是

var obj = {
            name:'13',
            age:123,
            sex:'male',
            height:180,
            weight:75,
            __proto__:{
                lastName:'deng'
            }
}

        for(var i in obj){
            if(obj.hasOwnProperty(i)){
                console.log(obj[i])    //'13',123,'male',180,75,'deng'
            }
        }

25、不是所有事件都能冒泡，有一些特殊的事件是没有冒泡的。
26、阻止事件冒泡，event.stopPropagation()
27、取消a标签默认调换事件 <a href="javascript:void()">111</a>
28、事件源对象 e.target

//事件委托
<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
</ul>
var u = document.getElementsByTagName('ul')[0];
u.onclick = function(e){
    console.log(e.target.innerHTML)    //点击哪个li打印出哪个li的innerHTML
}

29、类数组
属性要为索引（数字），必须有length，最好加上push方法，splice

var obj = {
    '0':'a',
    '1':'b',
    '2':'c',
    'length:3,
    'push':Array.prototype.push,
    'splice':Array,prototype.splice
}

30、封装type方法

function type(target){
            var template = {
                '[object Array]':'array',
                '[object Object]':'object',
                '[object Number]':'number - object',
                '[object Boolean]':'Boolean - object',
                '[object String]':'String - object',
            }
            //1.分两类 原始值 引用值
            //2.区分引用值
            if(target === null){
                return 'null';
            }
            if(typeof(target) == 'object'){
                return 'object';
                //数组
                //对象
                //包装类
                var str = Object.prototype.toString.call(target);
                return template[str];
            }else{
                return typeof(target);
            }
        }

31、click事件等于mousedown和mouseup事件的组合
32、onmouseover和onmouseup，onmouseenter和onmouseleave是H5的事件
33、onmousedown的时候判断是鼠标左键、滚轮、鼠标右键区分来自于event中的button。0代表鼠标左键，1代表滚轮，2代表鼠标右键。click是玩玩不好使的。click只能监听鼠标左键。
34、键盘事件：keydown，keypress，keyup
35、文本类操作事件：input，focus，blur，change
36、window.onload 等待所有的标签解析和加载之后才触发
37、滚动条封装方法

function getScrollOffset(){
            if(window.pageXOffset){
                return{
                    x:window.pageXOffset,
                    y:window.pageYOffset
                }
            }else{
                return{
                    x:document.body.scrollLeft + document.documentElement.scrollLeft,
                    Y:document.body.scrollTop + document.documentElement.scrollTop
                }
            }
        }

38、屏幕宽高方法封装

function getViewportOffset(){
            if(window.innerWidth){
                return{
                    w:window.innerWidth,
                    h:window.innerHeight
                }
            }else{
                if(document.compatMode == 'BackCompat'){
                    return{
                        w:document.body.clientWidth,
                        h:document.body.clientHeight
                    }
                }else{
                    return{
                        w:document.documentElement.clientWidth,
                        h:document.documentElement.clientHeight
                    }
                }
            }
        }

39、查看元素的尺寸

dom.offsetWidth，dom.offsetHeight

40、window.scroll(x,y) 和 window.scrollTo(x,y) 方法完全一致
41、window.scrollBy()会在之前的数据之上做累加
42、只有.style能改变css样式
43、JSON是一种传输数据的格式（以对象为样板，本质上就是对象，但用途有区别，对象就是本地用的，JSON是用来传输的）
44、禁止右键 oncontextmenu="return false"
禁止复制和剪切：oncopy="return false;" oncut="return false;"
禁止复制 onselectstart="return false"
禁止图片拖动 ondragstart="return false"
45、父组件通过 Prop 向子组件传递数据，通过插槽向子组件传递内容。
46、在需要更改组件样式的顶层容器的样式前，加上 /deep/
47、拖拽demo

window.onload = function() { 
  //拖拽功能(主要是触发三个事件：onmousedown\onmousemove\onmouseup) 
  var drag = document.getElementById('drag'); 
  //点击某物体时，用drag对象即可，move和up是全局区域，也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动) 
  drag.onmousedown = function(e) { 
    var e = e || window.event; //兼容ie浏览器 
    var diffX = e.clientX - drag.offsetLeft; //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离 
    var diffY = e.clientY - drag.offsetTop; 
    /*低版本ie bug:物体被拖出浏览器可是窗口外部时，还会出现滚动条， 
      解决方法是采用ie浏览器独有的2个方法setCapture()\releaseCapture(),这两个方法， 
      可以让鼠标滑动到浏览器外部也可以捕获到事件，而我们的bug就是当鼠标移出浏览器的时候， 
      限制超过的功能就失效了。用这个方法，即可解决这个问题。注：这两个方法用于onmousedown和onmouseup中*/
      if(typeof drag.setCapture!='undefined'){ 
        drag.setCapture(); 
      } 
    document.onmousemove = function(e) { 
      var e = e || window.event; //兼容ie浏览器 
      var left=e.clientX-diffX; 
      var top=e.clientY-diffY; 
      //控制拖拽物体的范围只能在浏览器视窗内，不允许出现滚动条 
      if(left<0){ 
        left=0; 
      }else if(left >window.innerWidth-drag.offsetWidth){ 
        left = window.innerWidth-drag.offsetWidth; 
      } 
      if(top<0){ 
        top=0; 
      }else if(top >window.innerHeight-drag.offsetHeight){ 
        top = window.innerHeight-drag.offsetHeight; 
      } 
      //移动时重新得到物体的距离，解决拖动时出现晃动的现象 
      drag.style.left = left+ 'px'; 
      drag.style.top = top + 'px'; 
    }; 
    document.onmouseup = function(e) { //当鼠标弹起来的时候不再移动 
      this.onmousemove = null; 
      this.onmouseup = null; //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动） 
      //修复低版本ie bug 
      if(typeof drag.releaseCapture!='undefined'){ 
        drag.releaseCapture(); 
      } 
    }; 
  }; 
};

48、vue发布组件到npm,参考网站:https://www.vps123.co/?p=138