JavaScript基础知识记录~

最新推荐文章于 2022-08-31 10:30:52 发布

刘栀子

最新推荐文章于 2022-08-31 10:30:52 发布

阅读量181

点赞数

分类专栏：记录 js

本文链接：https://blog.csdn.net/lzhizi/article/details/105608088

版权

js 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

记录

6 篇文章 0 订阅

订阅专栏

文章目录

sessionStorage,localStorage和cookie的区别

相同点：

都是保存在浏览器端，且同源

不同点：

与服务器的数据交换方式不同
cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递，因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。而sessionStorage和localStorage不会自动把数据发给服务器。只会存在客户端缓存里面

数据的有效期不同
sessionStorage只在当前会话有效，关闭页面或浏览器后会被清除。 localStorage用作持久数据，一直存储在客户端。 cookie只在设置的cookie过期时间之前有效。

存储大小限制不同
cookie数据大小不能超过4k sessionStorage和localStoragr可以达到5M或者更大

作用域不同
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面。 localStorage 在所有同源窗口中都是共享的。 cookie也是在所有同源窗口中都是共享的。

cookie和session的区别

cookie存放在客户端，session存放在服务器
session相对于cookie更安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session。
session会在一定时间内保存在服务器上。当访问增多，会比较占用服务器的性能。考虑到减轻服务器性能方面，应当使用cookie。
单个cookie在客户端的限制是3K，就是说一个站点在客户端存放的cookie不能超过3K。

this的指向

普通函数

谁调用就指向谁

var age = 10;
var person ={
	age:20,
	getAge(){
	var age=30;
	return this.age
	}
}
person.getAge(); //20

getAge方法是person调用的，所以this指向person

箭头函数

调用者指向谁，则指向谁

var age = 10;
var person ={
  age:20,
  getAge:()=>{
    var age=30;
    return this.age
  }
}

person.getAge() // 10

getAge方法是person调用的，则getAge和person指向一致，person是window调用的,所以person指向window，因此getAge也指向window，输出10。

强制改变this指向

你说指向谁就指向谁

改变this指向，有call，apply，bind这几中方法

var age = 10;
var person = {
  age:20,
  getAge:function(){
     var age=30;
     return this.age;

 }
};
person.getAge.call(person); // 20

这里在执行getAge方法的时候，传入了person，那么getAge的this指向person ，所以输出20

js执行步骤

语法分析判断是否存在语法错误 👉 预编译 👉 解析执行

任何变量如果变量未声明就赋值,此变量就为全局对象所有

一切声明的变量全是window的属性 window就是全局的域

预编译 👉 发生在函数执行之前 GO—>window全局作用域 AO—>函数作用域

预编译步骤

1.创建AO对象(执行期上下文)
2.找形参和变量声明将变量和形参作为AO属性名,值为underfined
3.将实参和形参统一
4.在函数里面找函数声明,赋值函数体

重名时函数权重最高

执行前创建一个AO

AO{
a:undefined----->function a() {}---->123
b:undefined----->function b(){}
}

function fn(a) {
      console.log(a);  //函数a 重名时函数权重最高
      var a = 123;
      console.log(a) //123
      function a() {

      }
      console.log(a) //123
      var b = function b() {

      } 
      console.log(b) //打印函数b
      function d() {
      }
}
    fn(1)

链式调用方法

var you = {
            eat: function () {
                console.log('eat.....')
                return this;  // 返回当前的执行上下文对象this

            },
            walk: function () {
                console.log('walk..........')
                return this;
            },
            drink: function () {
                console.log('drink........................')
                return this;
            }
        }

        you.eat().drink().walk()

闭包

        var name = "asas"
        var init = (function () {   //立即执行函数 ->生成自己的执行上下文 赋值到第一位 第二位是全局的GO   不污染全局变量
            var name = "abs"
            function callName() {
                console.log(name)
            }
            return function () {
                callName() //将callName赋值给init 
            }
        }())
        init()

for in 遍历

for in 用于遍历对象

obj.hasOwnProperty() 可以用来判断自己的方法还是原型的方法

in 判断属性属不属于这个对象里面但是不能判断是原型的还是自身的属性

instanceof

A instanceof B A对象是不是B构造函数构造出来的看A对象的原型上有没有B的原型

let obj = {
            sex: 'man',
            name: '张三',
            grand: 123,
            __proto__:{
                lastName:'李四'
            }
        }

 for (let i in obj) { 
            // console.log(obj.i)  obj.j -------------会被映射为 obj['j']   所以显示underfind
            if (obj.hasOwnProperty(i)) { //判断属性是否是自己本身的还是原型上的属性 是自己本身的则直接打印
                console.log(obj[i])
            }
        }

继承

给father构造函数原型上设置一个lastName

 Father.prototype.lastName = "zhangsan"

生成两个构造函数

function Father() {
}
function Son() {   

}

封装一个函数实现继承

function inherit(target, option) { //封装一个方法继承
            target.prototype = option.prototype
}

调用继承方法使用son方法生成一个Son方法

inherit(Son, Father)
let son = new Son()
console.log(son.lastName)   //打印son里面的lastName  显示zhangsan

Son 和 Father 共同一个原型当Son更改了lastName Father也发生了改变
在这里插入图片描述

圣杯模式

没有改变origin的prototype也不会影响target的prototype

function inherit1(target, origin) { 
    function F() { }  //用一个新的函数中间件接受原型属性
    F.prototype = origin.prototype 
    target.prototype = new F() //目标函数的prototype继承中间件的protptype
    target.prototype.constuctor = target; //目标源构造函数继承自己的原型
    target.prototype.uber = origin.prototype;// 使用一个新的属性接受需要继承的原型 当原型发生变化之后也不会影响继承的原型。也可以直接拿 继承对象的原型
  
    }

arguments

Sum函数也可以不用传递形参直接使用arguments获取实参

function Sum() {

   console.log(arguments) //形参

}
Sum(1, 2, 4, 5) //实际参数
输入图片说明

当实参少于形参没有传递的参数直接显示underfined

function Sum(a,b,c,d,f) {

   console.log(a,b,c,d,f) //形参

}
Sum(1, 2, 4, 5) //实际参数
输入图片说明

什么是回流和重绘

重绘：渲染树里面的元素需要更新属性，在不影响布局的情况下更改了元素的风格和外观，比如font-size，这样的操作叫重绘

回流：渲染树里面的元素需要重新构建的操作，比如布局，隐藏等。会影响布局的操作称之为回流

任何会改变元素的几何信息的操作，都会触发回流。

添加或者删除可见的dom元素
元素尺寸的改变边距边框宽度和高度
内容变化，比如用户在input输入文字
浏览器窗口尺寸改变 resize事件发生
计算offsetWidth和offsetHeight属性
设置style属性的值
当你修改网页的默认字体时

如何减少回流

使用transform 替代top
不要把节点的属性值放在一个循环里面当成循环里的变量
不要使用table布局，可能一个很小的改动会造成table的重新布局
把DOM离线后修改，比兔使用documentFragment 对象在内存里操作DOM
修改DOM样式的使用使用class修改。

前端性能优化

页面内容方面

通过合并css 雪碧图使用base64等方式来减少http请求数，避免过多的请求造成等待的情况。
通过DNS缓存机制来减少 DNS的查询次数
使用延迟加载的方式，来减少页面首屏加载时需要请求的资源。延迟加载的资源当用户需要访问时，再去请求加载。
通过用户行为对某些资源使用预加载的方式，来提高用户需要访问资源师的响应速度。

服务器方面

使用CDN服务，来提高用户对于资源请求是的响应速度。
服务器启用Gzip，Deflate等方式对于传输的资源进行压缩减小文件的体积。
尽可能减小cookie的大小，并且通过将静态资源文件分配到其它域名下，来避免对静态资源请求时携带不必要的cookie。

CSS和JavaScript方面

把样式列表放在页面的hrad标签中，减少页面的首次渲染时间
避免使用@import标签
尽量把js脚本放在页面底部或者使用的defer和async属性，避免脚本的加载和执行阻塞页面的渲染。
通过对JavaScript和CSS的文件进行压缩，来减小文件的体积。

刘栀子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础知识记录~

1. sessionStorage,localStorage和cookie的区别相同点：都是保存在浏览器端，且同源不同点：与服务器的数据交换方式不同cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递，因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。而sessionStorage和localStora...
复制链接

扫一扫