JS
javascript的typeof返回哪些数据类型
“javascript的typeof返回的数据类型有：undefined，number，string，boolean，object，function。”
例举3种强制类型转换和2种隐式类型转换?
1.强制转换
通过String（），Number（），Boolean（）函数强制转换
2.隐式转换
object是引用类型，其它的五种是基本类型或者是原始类型。我们可以用typeof方法打印来某个是属于哪个类型的。不同类型的变量比较要先转类型，叫做类型转换，类型转换也叫隐式转换。隐式转换通常发生在运算符加减乘除，等于，还有小于，大于等。。
split() join() 的区别
join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
<script>
var a=new Array();
a[0]="XHTML";
a[1]="CSS";
a[2]="JavaScript";
alert(a.join("#")); //XHTML#css#JavaScript
</script>
split(a,b)方法：用于把一个字符串分割成字符串数组. a是必须的,决定个从a这里开始分割
b不是必须的，可选。该参数可指定返回的数组的最大长度 。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
注意返回的数组中不包括a本身；
var str="how are you?";
document.write(str.split("")+"<br />");//h,o,w, ,a,r,e, ,y,o,u,?
document.write(str.split("a")+"<br />");//how ,re you? 不包含a本身
document.write(str.split(" ")+"<br />");//how,are,you?
document.write(str.split("",3)+"<br />");//h,o,w
数组方法pop()push() unshift()shift()
push后添
pop后删
unshift前添
shift前删
事件绑定和普通事件有什么区别
普通事件（onclick）
普通事件就是直接触发事件，同一时间只能指向唯一对象，所以会被覆盖掉。代码如下：
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("你好111");
}
btn.onclick = function(){
alert("你好222");
}
输出的结果只会有<你好222>，一个click处理器在同一时间只能指向唯一的对象。所以就算一个对象绑定了多次，其结果只会出现最后的一次绑定的对象。
事件绑定（addEventListener）
事件绑定就是对于一个可以绑定的事件对象，进行多次绑定事件都能运行。代码如下：
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
alert("你好111");
},false);
btn.addEventListener("click",function(){
alert("你好222");
},false);
运行结果会依次弹出你好111，你好222的弹出框。
ie9 以前：使用attachEvent/detachEvent进行绑定
进行事件类型传参需要带上 on 前缀
这种方式只支持事件冒泡，不支持事件捕获
ie9 开始：使用addEventListener进行绑定
二者区别
addEventListener对任何DOM都是有效的，而onclick仅限于HTML
addEventListener可以控制listener的触发阶段,（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除。
总的来说：事件绑定是指把事件注册到具体的元素之上，普通事件指的是可以用来注册的事件
IE和DOM事件流的区别
什么是“事件流”？
事件流描述的是从页面中接收事件的顺序
事件流的种类：
事件流主要分为三种
事件冒泡流(IE事件流)：事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档)
事件捕获流(Netscape事件流)：不太具体的节点最先接收到事件，而最具体的节点应该最后接收到事件(在事件到达预定目标之前捕获到)
DOM事件流：事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会；然后是实际的目标接收事件；最后是冒泡阶段，可以在这个阶段对事件做出响应。
IE和DOM事件流的区别：
IE和DOM事件流的区别主要有四个方面不一样
执行的顺序不一样：事件俺的执行顺序不一样
案例为：
<body>
<div>
<button id = 'btn'>点击<button>
</div>
</body>
三种事件流分别是：
冒泡型事件模型(IE事件流)： button->div->body
捕获型事件模型(Netscape事件流)： body->div->button
DOM事件模型： body->div->button->button->div->body (先捕获后冒泡)
IE和DOM事件侦听函数的区别：
IE使用:
[Object].attachEvent("name_of_event_handler", fnHandler); //绑定函数
[Object].detachEvent("name_of_event_handler", fnHandler); //移除绑定
DOM使用：
[Object].addEventListener("name_of_event", fnHandler, bCapture); //绑定函数
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除绑定
事件参数不一样和this指向不一样
如上的两个不一样的事件侦听函数：
attachEvent接受两个参数，第一个参数是事件名称，第二个fnHandler是回调处理函数
注意：IE下利用attachEvent注册的处理函数调用时this指向不再是先前注册事件的元素，这时的this为window对象了
addEventListener方法接受三个参数：
第一个参数是事件名称，值得注意的是，这里事件名称与IE的不同，事件名称是没’on’开头的;
第二个参数fnHandler是回调处理函数;
第三个参数注明该处理回调函数是在事件传递过程中的捕获阶段被调用还是冒泡阶段被调用
注意：它可以在一个DOM元素上绑定多个事件处理器，并且在处理函数内部，this关键字仍然指向被绑定的DOM元素，另外处理函数参数列表的第一个位置传递事件event对象
IE和标准下有哪些兼容性的写法
1）获取事件对象：var ev = ev || window.event
2）获取页面的可视区的宽度：document.documentElement.clientWidth || document.body.clientWidth
3）获取触发事件的事件源：var target = ev.srcElement||ev.target
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gqDyfHHB-1619697702737)(C:\Users\联想\AppData\Roaming\Typora\typora-user-images\1619688324974.png)]
call和lapply的区别
它们各自的定义：
apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。
call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。
它们的共同之处：
都“可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象”。
它们的不同之处：
apply：最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里。如果argArray不是一个有效的数组或arguments对象，那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数，那么Global对象将被用作thisObj，并且无法被传递任何参数。
call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针。如果没有提供thisObj参数，那么 Global 对象被用作thisObj。
实际上，apply和call的功能是一样的，只是传入的参数列表形式不同。
b继承a的方法
js继承有5种实现方式：
1、继承第一种方式：对象冒充
function Parent(username){
this.username = username;
this.hello = function(){
alert(this.username);
}
}
function Child(username,password){
//通过以下3行实现将Parent的属性和方法追加到Child中，从而实现继承
//第一步：this.method是作为一个临时的属性，并且指向Parent所指向的对象，
//第二步：执行this.method方法，即执行Parent所指向的对象函数
//第三步：销毁this.method属性，即此时Child就已经拥有了Parent的所有属性和方法
this.method = Parent;
this.method(username);//最关键的一行
delete this.method;
this.password = password;
this.world = function(){
alert(this.password);
}
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello();
child.hello();
child.world();
2、继承第二种方式：call()方法方式
call方法是Function类中的方法
call方法的第一个参数的值赋值给类(即方法)中出现的this
call方法的第二个参数开始依次赋值给类(即方法)所接受的参数
function test(str){
alert(this.name + " " + str);
}
var object = new Object();
object.name = "zhangsan";
test.call(object,"langsin");//此时，第一个参数值object传递给了test类(即方法)中出现的this，而第二个参数"langsin"则赋值给了test类(即方法)的str
function Parent(username){
this.username = username;
this.hello = function(){
alert(this.username);
}
}
function Child(username,password){
Parent.call(this,username);
this.password = password;
this.world = function(){
alert(this.password);
}
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello();
child.hello();
child.world();
3、继承的第三种方式：apply()方法方式
apply方法接受2个参数，
A、第一个参数与call方法的第一个参数一样，即赋值给类(即方法)中出现的this
B、第二个参数为数组类型，这个数组中的每个元素依次赋值给类(即方法)所接受的参数
function Parent(username){
this.username = username;
this.hello = function(){
alert(this.username);
}
}
function Child(username,password){
Parent.apply(this,new Array(username));
this.password = password;
this.world = function(){
alert(this.password);
}
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello();
child.hello();
child.world();
4、继承的第四种方式：原型链方式，即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child，从而实现了继承
function Person(){
}
Person.prototype.hello = "hello";
Person.prototype.sayHello = function(){
alert(this.hello);
}
function Child(){
}
Child.prototype = new Person();//这行的作用是：将Parent中将所有通过prototype追加的属性和方法都追加到Child，从而实现了继承
Child.prototype.world = "world";
Child.prototype.sayWorld = function(){
alert(this.world);
}
var c = new Child();
c.sayHello();
c.sayWorld();
5、继承的第五种方式：混合方式
混合了call方式、原型链方式
function Parent(hello){
this.hello = hello;
}
Parent.prototype.sayHello = function(){
alert(this.hello);
}
function Child(hello,world){
Parent.call(this,hello);//将父类的属性继承过来
this.world = world;//新增一些属性
}
Child.prototype = new Parent();//将父类的方法继承过来
Child.prototype.sayWorld = function(){//新增一些方法
alert(this.world);
}
var c = new Child("zhangsan","lisi");
c.sayHello();
c.sayWorld();
JavaScript this指针、闭包、作用域
this：指向调用上下文。
闭包：内层作用域可以访问外层作用域的变量。
作用域：定义一个函数就开辟了一个局部作用域，整个JS执行环境有一个全局作用域。
事件委托是什么
JS里的事件委托：就是当事件触发时，把要做的事委托给父元素来处理。
再通俗点：就是自己的事不想干，叫它爸爸，甚至爷爷、甚至祖先来干。
作用
在学它的用法和原理之前，我们先了解一下它的作用，有什么好处。再让各位决定是否愿意继续看下去呢?
作用1：节约内存(哇塞，这个好这个棒!)
作用2：能为之后新增的DOM元素依然添加事件
闭包是什么，有什么特性，对页面有什么影响
闭包他是一种特殊的对象,他由两部分构成:函数,及创建函数的环境.
闭包我们可以理解为:将函数内部和外部函数链接起来的桥梁.
闭包的解释:函数嵌套函数,内部的函数调用外部函数的变量或者参数,
优点:
1)防止全局污染
2)内部的函数可以用外部的变量或参数
3)内部的变量不会被垃圾回收机制回收
特性:
1)闭包可以更新外部的变量的值
2)用闭包可以模拟私有方法
缺点:
1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,
所以不能滥用闭包,否则会造成页面性能的问题;
2)闭包和全局变量一样,如果大量使用可能会造成内存泄漏.
如何阻止事件冒泡和默认事件
js冒泡和捕获是事件的两种行为，使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用event.preventDefault()可以取消默认事件。
添加删除替换插入到某个接点的方法
js：
appendChild()
//添加
removeChild()
//删除节点
insertBefore（插入节点，被插节点）
//插入（前插后）
replaceChild（新节点,旧节点）
//替换（前替换后）
jq：
append() （旧节点添加新节点后面）
appendTo() （新节点添加到旧节点后面）
prepend() （旧节点添加新节点的前面）
prependTo() （新节点添加到旧节点的前面）
//添加
remove()（//清空：） empty()//删除
javascript的本地对象，内置对象和宿主对象
本地对象：array, object,regexp等可以new实例化；
内置对象：Global,Math等不可实例化的对象，也是本地对象，Global不存在，但是isNaN(),parselnt()和parseFloat()方法都属于Global的方法。
宿主对象：为浏览器提供的对象，所有的BOM和DOM，如document,window；
document load 和document ready的区别
页面加载完成有两种事件
load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数，load方法就是onload事件。
缺点：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响
代码形式：
//document load
$(document).load(function(){
...code...
})
$(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行
在原生的jS中不包括ready()这个方法，Jquery才有，jquery中有 $().ready(function)。
代码形式为：
//document ready
$(document).ready(function(){
...code...
})
//document ready 简写
$(function(){
...code...
})
总结：如果页面中要是没有图片之类的媒体文件的话ready与load是差不多的，但是页面中有文件就不一样了，所以还是推荐大家在工作中用ready。
“==”和“ ===”区别
===比较类型和值，==只比较值。
javascript的同源策略
同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。
同源的定义
如果两个 URL 的 protocol、port (en-US) (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。
下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例:
| URL | 结果 | 原因 |
|---|---|---|
http://store.company.com/dir2/other.html | 同源 | 只有路径不同 |
http://store.company.com/dir/inner/another.html | 同源 | 只有路径不同 |
https://store.company.com/secure.html | 失败 | 协议不同 |
http://store.company.com:81/dir/etc.html | 失败 | 端口不同 ( http:// 默认端口是80) |
http://news.company.com/dir/other.html | 失败 | 主机不同 |
编写一个数组去重的方法
var arr1 =[1,2,2,2,3,3,3,4,5,6]，
arr2=[];
for(var i = 0,len = arr1.1ength; i< len; i++){
if(arr2. indexOf(arr1[i]) < 0){
arr2. push(arr1[i]);
}
document. write(arr2); // 1,2,3,4,5,6
JavaScript是- 一门什么样的语言，它有哪些特点?
javaScript是一种轻量级直译式脚本型语言，是一种动态类型、弱类型、基于原型的语言，它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言。
Javascript的特点：
1、简单性：它的变量类型是采用弱类型，并未使用严格的数据类型。
2、动态性： 它可以直接对用户或客户输入做出响应，无须经过Web服务程序
3、跨平台性：JavaScript是依赖于浏览器本身，与操作环境无关。
4、安全性：只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。
JavaScript的数据类型都有什么? .
原始数据类型：object,number,string,boolean,null,undefined
引用数据类型
object类型的Array 、Date、function
己知ID的Input输入框，希望获取这个输入框的输入值，怎么做?
利用document.getElementById(“ID”).value就可以获取输入框的值。
希望获取到页面中所有的checkbox怎么做?
var domList = document.getElementsByTagName(‘input’);
var checkBoxList = [];
var len = domList.length; //缓存到局部变量
while (len--) { //使用while的效率会比for循环更高
if (domList[len].type == ‘checkbox’) {
checkBoxList.push(domList[len]);
}
}
148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
