资讯专栏INFORMATION COLUMN

javascript基础学习总结(一)

AdolphLWQ / 359人阅读

摘要:原型规则所有的函数,都有一个属性显示原型,属性值也是一个普通对象原型规则所有的引用类型数组对象函数,属性值指向它的构造函数的属性值。注释其实是的语法糖,的构造函数是,所有。要在执行是才能确认值,定义是无法确认的几种使用场景作为构造函数执行。

1.js中使用typeof能得到哪些类型?

number string boolean object function undefined 
如果变量是null,则typeof会返回 object。typeof undefined 返回 undefined。 

2.window.onload和DOMContentLoaded的区别

一般情况下,DOMContentLoaded事件要在window.onload之前执行,当DOM树构建完成的时候就会执行DOMContentLoaded事件,而window.onload是在页面载入完成的时候,才执行,这其中包括图片等元素。大多数时候我们只是想在DOM树构建完成后,绑定事件到元素,我们并不需要图片元素,加上有时候加载外域图片的速度非常缓慢。
if(obj.a == null){
//这里相当于 obj.a === null || obj.a === undefined ,简写形式
}

3.原型规则=>所有的引用类型都有构造函数

var a={} 其实是 var a = new Object()的语法糖
var b=[] 其实是 var b = new Array()的语法糖
function Foo(){...} 其实是 var Foo = new Function(...)

4.原型规则=>所有的引用类型(数组、对象、函数),都具有对象特性,即可自由扩展(除了“null” 之外)。

var a = [1,2,3,4];
a.name = ‘你好’;
function foo(){};
foo.age = 21;

5.原型规则=>所有的引用类型(数组、对象、函数),都有一个__proto__属性(隐式原型),属性值是一个普通的对象。

6.原型规则=>所有的函数,都有一个prototype属性(显示原型),属性值也是一个普通对象

7.原型规则=>所有的引用类型(数组、对象、函数),__proto__属性值指向它的构造函数的“prototype”属性值。

var obj = {};
obj.a=100;
obj.__proto__ === Object.prototype
注释:var obj ={} 其实是 var obj = new Objec()的语法糖,obj的构造函数是Object,所有    obj.__proto__ === Object.prototype。

8.原型链

当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么就会去它的__proto__ (即它的构造函数的prototype) 中寻找。
function Foo(name){
this.name = name;
}
Foo.prototype.sayName = function(){
console.log("my name is "+this.name);
}

var foo1 = new Foo("zhangsan");
foo1.printName = function(){
console.log("print name "+this.name);
}
foo1.printName();
foo1.sayName();
foo1.toString();
//foo1.__proto__为Foo.prototype,Foo.prototype.__proto__为Object.prototype


9.f instanceof Foo 的逻辑判断是:

f 的 __proto__ 一层一层往上,能否对应到 Foo.prototype

备注:阅读源码是高效提高技能的方式
不能“埋头苦钻”有技巧在其中,搜jquery源码解读分析等等
慕课网搜索“zepto设计和源码分析”免费教程。

10.this 要在执行是才能确认值,定义是无法确认

this的几种使用场景:
1.作为构造函数执行。
2.作为对象属性执行。
3.作为普通函数执行。
4.call、apply、bind。

11.作用域
在es6之前,ECMAScript的作用域只有两种:全局作用域、函数作用域。正是因为有这两种作用域,所以在javascript中出现--术语--“变量提升”。es6提供了块级作用域,且“块级作用域”并不影响var声明的变量。var声明的变量的性质和原来一样,还是具有‘变量提升’的特性。而‘块级作用域’通过新增命令let和const来体现。

12.闭包
实例1:

注释:函数的父级作用域是它定义时的作用域,不是执行时的作用域。
实例2:

输出为: example increment 1 2 3
注释:当一个函数返回另一个函数时,才会真正涉及闭包。返回的函数可以访问仅存在于其闭包中的变量

13.闭包在实际开发中的应用

//闭包实际应用主要用于封装变量,收敛权限。
function isFirstLoad(){
    var _list =[];
    return function( id ){
    if ( _list.indexOf ( id ) >=0 ){
        return false;
    } else {
        _list.push(id);
        return true;
    }
    }
}
var firstLoad = isFirstLoad();
firstLoad ( 10 ) // true
firstLoad ( 10 ) // false
firstLoad ( 20 ) // true

14.同步、异步和单线程
前端使用异步的场景:
定时任务:setTimeout, setInterval
网络请求:ajax请求,动态加载
事件绑定


注释:
执行第一行,打印100
执行setTimeout后,传入setTimeout的函数会被暂存起来,不会立即执行(单线程的特点,不能同时干两件事)。
执行最后一行,打印300
待所有程序执行完,处于空闲状态时,会立马看有没有暂存起来的要执行。
发现暂存起来的setTimeout中的函数无需等待时间,就立即拿过来执行,如果
setTimeout(function(){
console.log(200);
},1000),暂存起来的setTimeout函数有需要等待的时间,则会在等待时间后执行。

同步:
console.log(100);
alert(200);
console.log(300);
同步和异步的区别:同步会阻塞代码的执行,而异步不会。

18.DOM属于哪种基本的数据结构?

19.ajax -XMLHttpRequest
get请求:

post请求:

20.跨域
可以跨域加载资源的三个标签:


JSONP实现原理:

服务器端设置 http header

21.存储
cookie
本身用于客户端和服务器端通信
但是它有本地存储的功能,于是被“借用”
使用document.cookie = ...获取和修改即可

cookie用于存储的缺点
存储量太小,只有4KB
所有http请求都带着,会影响获取资源的效率
API简单,需要封装才能用document.cookie = ...

cookie的内容只要包括:名字,值,过期时间,路径和域。路径和域一起构成cookie的作用范围。若不设置过期时间,则cookie的生命周期为浏览器会话期间,关闭浏览器窗口,cookie就会消失。这种生命周期为浏览器会话期的cookie被称为会话cookie。
会话cookie一般不存储在硬盘上而是保存在内存里。若设置了过期时间,浏览器会把cookie保存在硬盘上,关闭再次打开浏览器,这些cookie仍然有效直到超过设定的过期时间。存储在硬盘上的cookie可以在同类型的浏览器间共享,比如两个IE窗口。

locationStorage和sessionStorage
THML5专门为存储而设计,最大容量5M
API简单易用:
localStorage.setItem( key, value);localStorage.getItem( key, value)
sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。localStorage生命周期是永久。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106873.html

相关文章

  • 基础巩固:JavaScript基础总结(基本概念篇)

    摘要:基础巩固基础总结使用已经好几年了,由于工作主要是做服务端开发,在工作中逐渐发现的使用范围原来越广泛。这里要注意,务必将基础部分掌握牢靠,磨刀不误砍柴功,只有将基础部分掌握并建立起系统的知识体系,在后面学习衍生的其他模式才能游刃有余。 基础巩固:JavaScript基础总结 使用JavaScript已经好几年了,由于工作主要是做服务端开发,在工作中逐渐发现JavaScript的使用范围原...

    YuboonaZhang 评论0 收藏0
  • JavaScript学习总结基础部分

    摘要:前缀规范每个局部变量都需要有一个类型前缀,按照类型可以分为表示字符串。例如,表示以上未涉及到的其他对象,例如,表示全局变量,例如,是一种区分大小写的语言。布尔值与字符串相加将布尔值强制转换为字符串。 基本概念 javascript是一门解释型的语言,浏览器充当解释器。js执行时,在同一个作用域内是先解释再执行。解释的时候会编译function和var这两个关键词定义的变量,编译完成后从...

    AlanKeene 评论0 收藏0
  • Javascript学习总结 - JS基础系列

    摘要:变量定义变量使用关键字变量名变量名可以任意取名,但要遵循命名规则变量必须使用字母下划线或者美元符开始。语法参数说明在消息对话框中要显示的文本返回值值。返回值点击确定按钮,文本框中的内容将作为函数返回值。 简述 本系列将持续更新Javascript基础部分的知识,谁都想掌握高端大气的技术,但是我觉得没有一个扎实的基础,我认为一切高阶技术对我来讲都是过眼云烟,要成为一名及格的前端工程师,必...

    Meils 评论0 收藏0
  • Javascript学习总结 - JS基础系列三

    摘要:案例每隔毫秒调用函数并显示时间。当点击按钮时,停止时间代码如下计时器每隔毫秒调用函数,并将返回值赋值给计时器计时器,在载入后延迟指定时间后去执行一次表达式仅执行一次。该值标识要取消的延迟执行代码块。 简述 本系列将持续更新Javascript基础部分的知识,谁都想掌握高端大气的技术,但是我觉得没有一个扎实的基础,我认为一切高阶技术对我来讲都是过眼云烟,要成为一名及格的前端工程师,必须把...

    zlyBear 评论0 收藏0
  • SegmentFault 技术周刊 Vol.40 - 2018,来学习门新的编程语言吧!

    摘要:入门,第一个这是一门很新的语言,年前后正式公布,算起来是比较年轻的编程语言了,更重要的是它是面向程序员的函数式编程语言,它的代码运行在之上。它通过编辑类工具,带来了先进的编辑体验,增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了,总结过去的 2017,相信小伙们一定有很多收获...

    caspar 评论0 收藏0
  • SegmentFault 技术周刊 Vol.40 - 2018,来学习门新的编程语言吧!

    摘要:入门,第一个这是一门很新的语言,年前后正式公布,算起来是比较年轻的编程语言了,更重要的是它是面向程序员的函数式编程语言,它的代码运行在之上。它通过编辑类工具,带来了先进的编辑体验,增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了,总结过去的 2017,相信小伙们一定有很多收获...

    nihao 评论0 收藏0

发表评论

0条评论

AdolphLWQ

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<