js基础

125 阅读5分钟

一、变量类型

1、数据类型

基本变量类型:string、number、boolean、undefined、null

引用类型数据:array、object、function

2、值引用和地址引用:

值引用就是创建一个新的变量,将变量的值存储在栈中,两个变量不会相互影响;

地址引用就是复制变量在栈中存储的地址,然后根据地址获取在堆中的数据,两个变量会相互影响;

3、谈谈你对堆和栈的理解

对于基本数据类型的变量,存储在栈中,当我们访问这个变量的时候,直接从栈中读取;

对于引用类型数据的变量,其地址存储在栈中,对应的内容存储在堆中;当我们访问这个变量的时候,先从栈中获取地址,然后根据地址读取相应的内容;

堆栈数据结构是一种后进先出的数据集合。

可以通过数组的方法push、pop、unshift、shift来实现堆栈。

二、变量提升与函数提升

通过var声明的变量和通过function定义的函数,会提升到当前作用域的顶部。

函数声明的优先级高于变量声明,会覆盖变量声明,但不会覆盖变量的赋值。

三、判断数据类型

typeof返回的数据类型:string、number、boolean、undefined、object、function;

局限性:对于array、null等特殊对象一律返回object。

instanceof用于检测对象,他是基于原型链运作的;用于检测一个对象在其原型链上是否存在一个构造函数的prototype属性。

[1,2,3] instanceof Array; // true
{} instanceof Object; // true
(function(){}) instanceof Function; // true

constructor指向类本身

[1,2,3].constructor===Array

constructor可以检测出除了undefined、null的其他类型,但是constructor属性会被修改。

function Person(){}
Person.prototype/new Person;
如果:
Person.prototype=new Student();
var person=new Person()
Person.prototype==new Person() // false
Person.prototype==new Student() // true

四、null与undefined的区别

null:表示“没有对象”,此处不应该有值,转换为数值为0,常见用法为:

1、释放对象内存;
2、对象原型链的终点null;

undefined:表示“缺少值”,此处应该有值,但是还未定义,转换为数值为NaN,常见的用法:

1、当访问超出数组下标或对象中没有的属性时,会返回undefined;
2、定义变量而没有赋值时;
3、函数没有返回值时返回undefined;

五、“==”与“===”

“==”比较的是内容。

比较时先进行数据类型的转化,再进行内容的比较。

null==undefined; // true
true==1; // true

字符串与数值比较:会转换为数值; 一个为对象,一个为字符串或数字,则先转换为基本类型的数据再做比较;

“===”既比较内容,也比较类型。

比较时,只要类型不同,则一定不相同。

六、事件

事件委托就是利用事件冒泡,将本该绑定在多个元素上的事件,绑定到他们共同的祖先元素上,如果动态添加子元素时,不必再为其绑定事件,可以提高程序性能,减少内存空间。

事件冒泡就是当事件触发时,会自下而上沿着父级一直传播,直到window。

事件捕获与事件冒泡相反,当事件触发时,会从根节点自上而下进行传播。

阻止冒泡事件

function stopPropagation(evevt){
    if(event.stopPropagation){
        event.stopPropagation();
    }else{
        event.cancelBubble=true;
    }
}

阻止默认行为

function preventFefault(event){
    if(event.prevebtDefault){
        event.preventDefault();
    }else{
        event,returnValue=false;
    }
}

七、简述JavaScript中this指向

this指向函数运行时所在的对象

1、普通函数中谁调用,this指向谁;

2、构造函数直接调用,this指向window;通过new操作符创建的对象,this会指向新对象;

3、匿名函数或不处于任何对象中的函数,this指向window;

八、原型

1、原型

①原型是js提供给函数的一个对象类型的属性,所有的函数都有一个显式属性为prototype;

②所有的引用类型的数据(数组、对象、函数)都有隐式属性—_ _ proto _ _ ;函数是一个特殊的对象,也具有隐式属性_ _ proto_ _。

③所有引用类型的数据的_ _ proto_ _ 都指向构造函数的prototype;

2、原型本身也是一个对象:

proto(原型指向):指向原型本身;

constructor(构造器):指向类本身;

所有的对象都有一个隐式属性_ _ proto_ _ 。

构造函数function Foo(){ }——prototype、_ _ proto_ _ ;

通过构造函数实例化对象foo=new Foo()——_ _ proto_ _ ,constructor;

3、原型链

foo._ _ proto_ _指向Foo.prototype;

Foo._ _ proto_ _指向Function.prototype;

Function._ _ proto_ _指向Object.prototype;

Object._ _ proto_ _指向null;

4、继承

1、通过原型链实现继承

function Parent(){
    this.name="lisa";
}
function Child(){}
Child.prototype=new Parent();
let child1=new Child()
console.log(child1.name); // lisa

通过原型链实现继承,不能使用对象字面量的方法创建原型,因为重写原型时,会截断原型链,之前实例化对象无法继承。

2、通过构造函数实现继承

function Parent(name){
    this.name=name;
}
function Child(){
    Parent.call(this,"lisa")
}
let child1=new Child();
console.log(child1.name); // lisa

可以进行参数的传递,但是不能函数复用。

九、自执行函数

function声明的函数不能只能直接运行,将其转换为函数表达式就可运行

function(){}() 
(function(){})()

十、ajax

ajax的工作原理

ajax就是通过创建一个XMLHttpRequest对象,向服务器发送请求,服务器返回数据,通过javaScript操作DOM元素实现页面更新。

ajax的优点

实现页面的局部刷新,通过了用户的体验度;
与服务器通信是异步请求的方式,不会打断用户的操作;
减轻服务器的负担,实现按需请求数据

十一、js和jq中的入口函数

js:当文档的DOM结构都加载完毕后执行,包含图片视频等文件

document.onload=function(){}

jq:当文档中的DOM结构加载完毕后执行

$(function(){})
$(document).ready(function(){})

十二、防抖节流

防抖:当事件持续触发时,一定时间内不再触发,则调用一次事件处理函数;

function debounce(fn,wait){
    let timer=null;
    return function(){
        if(timer){
            clearTimeout(timer);
        }
        timer=setTimeOut(fn,wait);
    }
}
window.addEventListener("scroll",debounce(handler,1000))

节流:当事件持续触发时,使其在一定时间内执行一次事件处理函数。

定时器

function throttle(fn,wait){
    let timer=null;
    return function(){
        let that=this;
        let args=arguments;
        if(!timer){
            timer=setTimeout(function(){
                fn.apply(that,args);
                timer=null;
            },wait)
        }
    }
}
function handler() { console.log("节流") };
window.addEventListener("scroll", throttle(handler, 1000));

时间戳

function throttle(fn,wait){
    let prev=Date.now();
    return function(){
        let that=this;
        let args=arguments;
        let now=Date.now();
        if(now-prev>=wait){
            fn.apply(this,args);
            prev=Date.now();
        }
    }
}
function handler() { console.log("节流") };
window.addEventListener("scroll", throttle(handler, 1000));