js常见知识点汇总(精华)

作者:admin / 时间:1年前 (2017/07/02) / 分类:前端开发 / 阅读:1402 / 评论:0

1.将字符串转化为数字:parseInt()(只保留数字整数部分,不会四舍五入)
parseFloat()(如果在数字后加上非数字的字符,也可以转换成功)
将数字转换为字符串:.toString,.stringify
ECMAScript中可用的3种强制类型转换如下:
Boolean(value)——把给定的值转换成Boolean型;
Number(value)——把给定的值转换成数字(可以是整数或浮点数);
String(value)——把给定的值转换成字符串。
Array.from(arguments)——转换为数组的方法

2.pageX    光标相对于该网页的水平位置(ie无)
pageY    光标相对于该网页的垂直位置(ie无)
screenX    光标相对于该屏幕的水平位置
screenY    光标相对于该屏幕的垂直位置
clientX    光标相对于可见区的水平位置
clientY    光标相对于可见区的垂直位置

3.function fun(){console.log(num);
在函数体内部,声明变量,会把该声明提升到函数体的最顶端。 只提升变量声明,不赋值。

4.arguments.callee; 返回的是正在执行的函数本身。 也是在函数体内使用。 在使用函数递归调用时推荐使用arguments.callee代替函数名本身

5.函数中遇到要修改自身属性的一定要用this来代替自身。

6.我们用条件语句来判断数据类型中的真假;
   数据                          结论
数字类型            所有数字都是真,0是假
字符串           所有字符串都是真,’ ’串是假
对象                    所有对象都是真,null是假
未定义        undefined是假,没有真

7.cloneNode();括号里面如果里面是 true 深层复制,除了复制本盒子,还复制子节点。如果为 false 浅层复制只复制本节点不复制子节点。

8.设置节点属性:
获取节点属性 getAttribute(属性)
设置节点属性 setAttribute(“属性”,”值”);
删除某个属性 removeAttribute(“属性”);

9.setInterval是排队执行的,假如间隔时间是1秒,而执行的程序的时间是2秒,上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间为2秒
setTimeout延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒

10.offsetTop 与 style.top 的区别:
最大区别在于 offsetTop可以返回没有定位盒子的距离顶部的位置; 而 style.top不可以(只有定位的盒子才有 left top right)
最重要的区别style.left只能得到行内样式,offsetLeft都可以
offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
offsetTop 只读,而 style.top 可读写。
如果没有给 HTML 元素指定过 top 样式,则 style.top 返回空字符串。

11.scrollTop 当滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离
页面滚动效果
window.onscroll = function() { 页面滚动语句 }
谷歌浏览器 和没有声明 DTD : document.body.scrollTop;
火狐 和其他浏览器 document.documentElement.scrollTop;
ie9+ 和 最新浏览器都认识window.pageXOffset; pageYOffset (scrollTop)
 兼容性写法: var scrollTop = window.pageYOffset || document.documentElement.scrollTop|| document.body.scrollTop || 0;

12.offsetWidth: width + padding + border    clientWidth: width + padding 不包含border     scrollWidth: 大小是内容的大小

13.检测屏幕宽度(可视区域)
ie9及其以上的版本 window.innerWidth
标准模式 document.documentElement.clientWidth
怪异模式 document.body.clientWidth

14.window.onresize = function() {} 窗口框架被调整大小时的事件

15.事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有父元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。
 顺序div -> body -> html -> document -> window
不是所有的事件都能冒泡。以下事件不冒泡:blur、focus、load、unload
阻止冒泡的方法: if(event && event.stopPropagation)

16.判断当前对象
火狐 谷歌 等 event.target.id
ie 678 event.srcElement.id
 兼容 var targetId = event.target ? event.target.id : event.srcElement.id;

17.在HTML5中可以通过window.history操作访问历史状态,让一个页面可以有多个历史状态
window.history.forward(); // 前进
window.history.back(); // 后退
window.history.go(); // 刷新

18.想要捕获drop事件就一定要在改事件里阻止默认事件
target.addEventListener(“dragover”,function(e){
e.preventDefault();
e.stopPropagation();
})

19.javascript中的封装
封装:通过将一个方法或者属性声明为私用的,可以让对象的实现细节对其他对象保密以降低对象之间的耦合程度,可以保持数据的完整性并对其修改方式加以约束,这样可以是代码更可靠,更易于调试。封装是面向对象的设计的基石。
封装实现细节指的是,使得对象内部的变化对于其他对象而言是不可见的,对象只对自己的行为负责。对象之间的耦合变松散,对象之间只通过暴露的API接口来通讯。这样一来,即便当我们需要修改对象时,可以任意修改它的内部实现,而由于对外接口没有变化,则不会影响程序的其他功能。
很多编程语言是通过语法解析来实现封装数据的,比如Java提供private、public、protected等关键字来限定访问权限,而JavaScript缺乏这些关键字的支持,只能依赖变量的作用域来实现public和private的封装特性。
私有属性和方法:函数有作用域,在函数内用var 关键字声明的变量在外部无法访问,私有属性和方法本质就是你希望在对象外部无法访问的变量。
特权属性和方法:创建属性和方法时使用的this关键字,因为这些方法定义在构造器的作用域中,所以它们可以访问到私有属性和方法;只有那些需要直接访问私有成员的方法才应该被设计为特权方法。
共有属性和方法:直接链在prototype上的属性和方法,不可以访问构造器内的私有成员,可以访问特权成员,子类会继承所有的共有方法。
共有静态属性和方法:最好的理解方式就是把它想象成一个命名空间,实际上相当于把构造器作为命名空间来使用。
//将一个事物的属性和方法集中定义在一个对象里

20.javascript中的继承
原型编程泛型包括以下的特点:
所有的数据都是对象;
 不通过实例化创建对象,而是找到一个对象作为原型并克隆它;
对象会记住个各自的原型;
如果对象无法响应某个请求,会把这个请求委托给自己的原型;
你使用new操作符调用构造函数时,会经历以下步骤:
创建一个空对象,作为将要返回的实例对象;
将空对象的原型指向构造函数的prototype属性,也就是Keith构造函数的prototype属性;
将空对象赋值给构造函数内部的this关键字,也就是this关键字会指向实例对象;
开始执行构造函数内部的代码;
对象会记住各自的原型,如果对象无法响应某个请求,会把这个请求委托给自己的原型。
//集中存储一系列对象的共有成员的父对象

21.JavaScript中的多态
多态最根本的作用是消除条件分之语句,将过程化的条件分之语句转化为对象的多态性。
每个对象应该做什么,封装在成对象内部的一个方法,每个对象负责自己的行为。所以这些对象可以根据同一个指令,有条不紊地分别进行各自的工作,这正是面向对象的优点。
由于JavaScript的变量类型在运行期是可变的,意味着JavaScript对象的多态性是与生俱来的 。判断对象是否具有某种能力,不需要判断对象是否属于某种类型,只取决于它有没有相对应的方法,不存在任何程度的“类型耦合”。
//同一个事物在不同情况下表现出不同的状态

22.设置图片时<image scr="" alt="" width="">单设置一个长或宽则剩下的边长按比例自动设置。
鼠标移至图片上时变成小手给图片添加样式 cursor:pointer;
阻止表单提交<form action="javascript:;">
设置盒子权重时在样式中写 z-index:数字越大优先级越高。(z-index在position为static时失效)
id选择器与类选择器的区别:同一个页面中一个标签只能对应一个id但是可以选择多个类,类也可以应用在多个标签中。
给a标签的href="javascript:;" 其中javascript:是伪协议,它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;可以实现A标签的点击事件运行时,如果页面内容很多,有滚动条时,页面不会乱跳,用户体验更好。相当于执行了一段javascript空代码,地址不发生跳转。与这个相同
去掉li前面的小点用list-style-type: none;
使li或span的外形变为圆形用border-radius: 50%; 添加圆角边框。
textarea设置resize:none;可以防止用户改变文本框大小。
想让盒子根据里面内容多少改变大小将盒子height改成auto。
使按钮或者表单不可用this.disable=true;
a&&b 如果a 为假 ,则返回 a ;如果a 为真 ,则返回 b 。
a||b 如果 a 为假 ,则返回b ;如果 a 为真 ,则返回a 。
img {vertical-align: top; } /取消图片底部3像素距离/
一定要注意在javascript里修改style样式时候赋值都要用“”以字符串形式赋值。
javascript修改style中的数值后都可以到行内数值样式上看到。
如果在head里面引用javascript文件则需要考虑文件内函数是否在window.onload里面,否则会产生因为网页未加载完造成javascript出错。
JS 页面跳转: window.location.href = ”http://www.itcast.cn”
创建字符串时若里带有标签的最好用单引号括起来避免和里面的双引号冲突。
要获取当前页面宽度用document.documentElement.clientWidth。
获取当前页面相对滚动document.documentElement.scrollTop||document.body.scrollTop;
用window.addListener(“hashchange”,function(e){})来监听地址栏中#后的哈希值变化,利用window.location来得到地址对象。

23.this指向的几种情况:
函数调用指向全局对象,即window
隐性丢失,嵌套函数里的this指向全局对象
构造函数里的this,指向实例化的对象
函数方法里的this,指向函数调用者
bind,call和apply中的this绑定到对象
箭头函数中使用的 this,其实是直接包含它的那个函数或函数表达式中的 this
const obj = {
    test() {
        const arrow = () => {
            // 这里的 this 是 test() 中的 this,
            // 由 test() 的调用方式决定
            console.log(this === obj);  //true
        };
        arrow();
    },
obj.test();

24.函数调用的几种方式
函数调用
方法调用(链接调用和事件响应)
构造器调用
bind,call和apply调用

25.js中函数对象是有长度的,它的长度是由参数的个数决定。(function (a, b, c, d) {}).length === 4。

26.Q: 什么是原型链?(重点)
A: 原型链是JavaScript的继承机制,理解原型链前,我们需要知道prototype与__proto__
prototype:是函数的一个属性(每个函数都有一个prototype属性),这个属性是一个指针,指向一个对象,即原型对象。
__proto__:是一个对象拥有的内置属性(请注意:prototype是函数的内置属性,__proto__ 是对象的内置属性),是JS内部使用寻找原型链的属性。
因为构造函数可以定义类,所以也可以理解类的prototype属性指向类的原型对象。
__proto__指向实例对象继承的某个原型对象。

27.VO和AO:我们在创建一个函数的时候,它的属性,变量、方法都叫做变量对象(VO),当我们调用函数的时候,并不是直接在当前定义的作用域链上进行逻辑操作,而是根据当前函数的作用域,重新创建一个作用域链,这个作用域链用来执行代码时候使用,执行时候用到的变量对象(VO),我们称作为活动对象(AO),活动对象其实就是指向变量对象的指针。

28..delete arr[2];(只是将第三个数组元素的值设为undefined,数组长度不变);

29.流程控制总结:
循环语句:for 循环有两种(常规for循环和 for in 遍历)
       while 也有两种(常规 while 和 do while)
判断语句:if 判断
       switch 判断
       a > b ? a:b; 三目判断
       
30.函数声明会覆盖变量声明,但不会覆盖变量赋值,例如:
function foo(){
    return 1;
}
var foo;
console.log(typeof foo);  //"function"
函数声明优先于变量声明,但是如果变量赋值了情况就不一样
function foo(){
    return 1;
}
var foo = 1;
console.log(typeof foo); //"number"

31.指定形参传值的情况, arguments 对象与形参值相同,并且可以相互改变
   指定形参未传值的情况, arguments 对象对应的索引值为undefined,并且 arguments 对象与形参值不能互相改变
   function method(a,b,c){
       console.log(arguments.length)  //2
       arguments[0] = 11;
       console.log(a);  //11
       b = 12;
       console.log(arguments[1]);  //12
       arguments[2] = 3;
       console.log(c);  //undefined
       c = 4;
       console.log(arguments[2]);  //3
   }
   method(1,2)
   
32.var test = 1 +
   2
   console.log(test)  //3
   在上述情况下,为了正常解析代码,不会自动填充分号,但对于 return break continue 等语句,如果后面接跟换行,,解析器一定会填充分号
   function foo2(){
       return
       {
           bar:"hello"
       }
   }
   
33.在JavaScript中,常见的FALSE值有:0,'0',+0,-0,false,"",NaN,[];
   console.log([]==false)  //true
   console.log({}==false)  //false
   console.log(Boolean({})==false)  //true
   console.log(Boolean([])==false)  //true
   console.log(false=="0")  //true
   console.log(false==undefined)  //false
   console.log(false==null)  //false
   console.log(" \t\r\n"==0)  //true
   var a = {};var b = {};a == b; //false
   
34.数据类型:
   console.log(typeof 100)   //"number"
   console.log(typeof true)  //"boolean"
   console.log(typeof function)   //"function"
   console.log(typeof undefined)   //"undefined"
   console.log(typeof New Object)   //"object"
   console.log(typeof [1,2])   //"object"
   console.log(typeof NaN)   //"number"
   console.log(typeof dfg)   //"string"
   console.log(typeof null)   //"object"

35.如果return的不是一个对象,则函数里的对象可访问
function Otaku(name,age){
    this.strength=60;
    this.age=age;
    return "handsome boy";
}
var person = new Otaku('kevin',18);
console.log(person.age)  //18
console.log(person.name)  //undefined

如果return的是一个对象,则函数里的对象不可访问
function Otaku(name,age){
    this.strength=60;
    this.age=age;
    return {
        name:name,
        habit:"games"
    };
}
var person = new Otaku('kevin',18);
console.log(person.age)  //undefined
console.log(person.name)  //kevin

36.函数表达式又叫函数字面量  

37.setTimeout不能作为多线程使用,下例可以证明:
var isEnd =true;
setTimeout(function(){
    console.log(isEnd);  //永远都不会在控制台输出
},1000)
while(isEnd){
    isEnd = false;
}
   
38.删除对象后,对象的属性仍可以访问
var obj = {
    name:"hahaha",
    play:function(){
        console.log(games)
    }
}
obj = null;
var obj1 = obj;
console.log(obj1.name)  //hahaha
//如果要删除属性
delete obj1.name;
console.log(obj1.name);  //undefined

39.js中的事件绑定
ys1.addEventListener('click',function(){
    console,log(1);
})
jQuery中的事件绑定
ys1.bind('click',function(){
    console,log(1);
})

40.比较自定义对象
function Foo(){}
function Bar(){}
Bar.prototype = new Foo();
new Bar() instanceof Bar;  //true
new Bar() instanceof Foo;  //true
Bar.prototype = Foo();
new Bar() instanceof Foo;  //false

41.两个关于闭包的案例
function Fun(){
    var a = [];
    for(var i =0;i<10;i++){
        a.push(function(){
            console.log(i);
        })
    }
    return a;
}
var resule = Fun();
console.log(resule); //输出10个function  (这是重点)
console.log('结果');
for(var i=0;i<10;i++){
    resule[i](); //输出10个10  (这也是重点)
}

function fun(n,o){
    console.log(o);
    return {
        fun:function(m){
            return fun(m,n)
        }
    };
}
var a = fun(0);  //undefined
a.fun(1);  //0
a.fun(2);  //0
a.fun(3);  //0
var b = fun(0).fun(1).fun(2).fun(3);  //undefined,0,1,2  !important
var c = fun(0).fun(1);  //undefined,0
c.fun(2);  //1
c.fun(3);  //1

42.判断一个变量是否存在应该用
if(typeof a!=undefined){}而不是
if(a){};应该如果这么用解析器会报错

43.考this:
var foo = {
    bar:function(){return this.baz;},
    baz:1
}
typeof (f=foo.bar)();  //什么也不输出
typeof (foo.bar)();   //"number"

44.function Obj(name){
    this.name = name;
    console.log(this.name);
}
var a = new Obj("name1");
var b = new Obj("name2");

45.split()和join()传空字符串和不传参数的区别
split不传参数则返回的数组长度为1,传入空字符串返回的是一个个数组
join不传参数返回的是元素用,隔开的字符串,传入空字符串返回的是元素直接相连的字符串

46.在数字字符串前面加上+号,会自动将其转换为数字,如果是非数字字符串,会自动转成NaN
alert(+"13")  //13
alert("13"+6)  //136
alert("13"-6)  //7

47.操作符:
var a = 4,b = 3;
c = (a<b)&&(a=5);
console.log(a);  //4
var a=2,b=3;
c=(a<b)||(a=5);
console.log(a)  //2

48.function x(){alert(2);}
   x();
   function x(){alert(3);}
   x();  //弹出两次三
   
49.var f = function g(){return 23;}
console.log(typeof g());   //error报错,不是undefined

50.原始类型比较时,会比较其值:
var num1=5;var num2=5;
num1 == num2;  //true
var obj1 = {x:1}
var obj2 = {x:1}
var obj3 = obj1;
obj1 == obj2  //false
obj1 == obj3  //true
obj2  == obj3  //false

51.function foo(){
  //do something
}
console.log(foo()); //undefined,因为没有返回值
function foo(){
  return "3as";
}
console.log(foo())  //3as

51.this 的隐性丢失:
var str = "outer"
function methodCall(){
    this.str = "inner";
}
methodCall.prototype = {
    printStr:function(){
        var that = this;
        var innerPrintStr = function(){
            console.log(that.str);  //inner
            console.log(this.str);  //outer
        }
        innerPrintStr();
    }
}
var a = new methodCall();
a.printStr();

52.js数组:
var arr = [1,2,3,4];
arr[0] = true;
arr[2] = 10;
arr[5] = "abc";
for(var i=0;i<arr.length;i++){
    document.write(arr[i]+"");  //true,2,10,4,undefined,abc
}

53.凡是没有形参的构造函数都可以省略圆括号
var o = new Object
var arr = new Array

54.IE和Dom事件流的区别:
执行顺序不一样
参数不一样
事件加不加on
this 指向问题

55.js运行时
var a=5;
var b=a;
b+=3;
alert(a);  //5

var a = [1,2,3];
var b = a;
b.push(4);
alert(a);  //1,2,3,4

var a = [1,2,3];
var b = a;
b=[1,2,3,4];
alert(a);  //1,2,3

56.var name = "world!";  //!important
(function(){
if(typeof name === 'undefined')    {
    var name = 'jack';     //如果这里有var,则输出goodbye jack;如果没有var就输出hello world
    console.log('goodbye'+name);
}else if(name == "world!"){
    console.log('hello'+name);
}else{
    console,log('hello goodbye');
}
})()

57.scope:
var z = 10;
function foo(){
    console.log(z);
}
(function(funArg){
    var z=20;
    funArg();
})(foo);  //10

var obj ={
    name:"a",
    getName:function(){
        return this.name;
    }
};
console.log(obj.getName());  //a
var getName=obj.getName;
console.log(getName());   //什么也不输出

58.会修改原数组的方法有:sort,reverse,splice

59.函数声明发生命名冲突会覆盖,变量声明发生命名冲突会忽略
function a(){
    console.log(1);
}
function a(){
    console.log(2);
}
a();  //输出2
var b = 1;
var b = 2;
console.log(b)  //输出2

60.var a = 1;
function (){
    console.log(a);  //1
    a = 2;    
}()   

61.var a = 1;
var a = function(){};
console.log(a)  //打印函数


62.function Person(){
    this.leg = 4;
}
Person.prototype.property=function(){
    return this.leg;
    console.log(a);
}
var a = new Person();
console.log(a.property()); //只打印4,不打印a;因为当遇到return时函数就不执行了

63.如何将JavaScript代码分解成几行吗?
在字符串语句中可以通过在第一行末尾使用反斜杠“\”来完成

64.函数就是具有运算逻辑的对象,匿名函数不利于调试,回调函数是一种控制反转。

65.ReferenceError 是与作用域判别失败相关,而TypeError则是作用域判别成功,但是对结果的操作非法或不合理。

66.如果同时存在多种绑定,那么绑定的优先级大致如下:
由new调用绑定到新创建的对象
由call 或者apply(或bind)调用绑定到指定的对象
由上下文对象调用绑定到那个上下文对象
默认在严格模式下绑定到undefined,否则绑定到全局对象

67.null和undefined的区别体现在哪儿?
null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。
undefined:
变量被声明了,但没有赋值时,就等于undefined。
调用函数时,应该提供的参数没有提供,该参数就等于undefined。
对象没有赋值的属性,该属性的值为undefined。
如果函数没有返回值时,就会默认返回undefined。
null:
作为函数的参数,表示该函数的参数不是对象。
作为对象原型链的终点。

68.alert(a); // undefined
alert(b); // error "b" is not defined
b = 10;
var a = 20;

69.VO对应的是函数创建阶段,JS解析引擎进行预解析时,所有的变量和函数的声明,统称为Variable Object。该变量与执行上下文相关,知道自己的数据存储在哪里,并且知道如何访问。VO是一个与执行上下文相关的特殊对象,它存储着在上下文中声明的以下内容:
变量 (var, 变量声明);
函数声明 (FunctionDeclaration, 缩写为FD);
函数的形参
AO对应的是函数执行阶段,当函数被调用执行时,会建立一个执行上下文,该执行上下文包含了函数所需的所有变量,该变量共同组成了一个新的对象就是Activetion Object。该对象包含了:
函数的所有局部变量
函数的所有命名参数
函数的参数集合
函数的this指向

70.var a = 1;
function fn1(){
    alert(a);  //1
    a = 2;
}
fn1();
alert(a);  //2

var a =1;
function fn1(a){  //形参的a相当于一个局部变量
    alert(a);  //undefined
    a = 2;   //这里实际上是对形参的a进行了赋值。所以还是局部变量
}
fn1();
alert(a);  //1

没有评论,留下你的印记,证明你来过。


发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。