《百道JS小知识点》系列(2)快速学习⛹🏻‍♂️

894 阅读3分钟

这是我参与更文挑战的第6天,活动详情查看: 更文挑战

前言🎡

最近在复习更新js小知识点,记录了一些实用性高的或者很基础很重要的知识点分享给大家。希望大家多多支持。

5、this是什么?⚾

1.为什么用this

它是让你的写法更加优雅,直观,就像promise一样(一种写法的优化),(可以理解为它代表一个隐式的对象),我们讨论this,其实在研究js执行。

function test(num) {
this.conut++;
console.log( "test: " + num );
}
test.count = 0;
var i;
for (i=0; i<10; i++) {
if (i > 5) {
test( i );
}
}
console.log( test.count )//结果不变 0
// 上面这个例子,this不是指向函数foo,而是指向window

2.对this认识

首先要改变固有认知:this指向函数本身或者函数的词法作用域,这是一种错误的认知。❌

🐱‍👓正解::this 是在运行时进行绑定的,并不是在编写时绑定,this的指向取决于函数调用的方式。

3.this使用反思

反思🙄: 面试时会遇到面试官问如何改变this的指向的方法,能不能手写?我们答了,但在开发时候我们就没有注意使用,舍近求远反而选择我们熟悉的“词法作用域”去解决问题。

4.this扩展

扩展:this的绑定方式(函数调用改变this指向的方法):

1.默认绑定:通过分析调用栈确定调用的位置(平时开发最多,可打断点用浏览器的调试工具,也可自己分析)

function test() {
console.log( this.num );
}
function test1(){
this.num = 2;
test();//调用位置:test1
}
var num = 1;
test();//调用位置:全局 1
test1();//2

2.隐式绑定

function test() {
console.log( this.num );
}
var test1 = {
num:2,
test:test
}
var num = 1;
test1.test();//2

3.显式绑定::call/apply、bind(网上很多,自查)

4.new绑定 参考《百道JS小知识点》系列(1)快速学习第四道题

优先级:4,3,2,1 (自己写个示例测试一下)

6、复制对象js对象之深浅拷贝⚾

复制对象有浅复制和深复制。

浅拷贝

对于对象的第一层是基础类型是复制值,对于是对象类型就复制引用。(修改对象时就会

  • es6 Object.assign()
function run() { 
    console.log(run);
 }
var ren = {name:'雾灵'}
var obj  = {
    a: 1,
    b: run,
    c: ren
}
var obj1 = Object.assign(obj)
obj1.c.name = 'wuling'// 改变新对象
console.log(obj.c.name);//旧对象也变了 wuling

深拷贝

把对象全部的数据都复制一遍,并存储下来,修改新对象,不影响老对象

实现方法:

  • JSON.parse(JSON.stringify())(框架源码里常用序列化)
  • 手写递归对象实现深拷贝(要注意细节)

7.是属性描述符,如何修改呢?

ES5之前是没有属性描述符的,普通对象属性描述符value,enumertable(是否可枚举),configurable(是否可配置),writable(是否可写),get(取值函数),set(赋值函数) 如果可以配置,使用Object.defineProperty,如下

var ren = {name:'雾灵'}
Object.defineProperty(ren,'name',{writable:false})
ren.name = 'wuling'
console.log(ren) //{name: "雾灵"}

今天就这样吧。👋

参考资料📕

《你不知道的javaScript》

欢迎关注作者雾灵🥇

个人博客 | github-雾灵

vue.js的API整理

简单实现vue的几个流程