- 博客(165)
- 收藏
- 关注
转载 this详解
一、方法调用模式当函数被保存为一个对象的属性时,它就可称为这个对象的方法。当一个方法被调用时,this被绑定到这个对象上。如果调用表达式包含一个提取属性的动作(. 或 []),那么它被称为方法调用。例如:var name = "window";var obj = { name: "obj", getName: function(){ alert(this.name); }}obj.getName(); //"obj" getName函数作为对象obj的方法调用,所以
2022-03-13 18:55:48
505
原创 watch对数据的监测
computed: { // 使用计算属性将对象转换为单个变量(数据检测方式二) username() { return this.obj.username; }},watch: { // 对单个属性进行检测 'obj.username': { handler(newName, oldName) { console.log(newName, oldName); }, deep: true }, // 方式二:使用计算属性返回的参.
2022-03-11 19:10:20
356
原创 组件之间传值使用方法
props/$emit父组件传子组件子组件export default { name: "Component2", props: { username: { type: String, default: '' } },}父组件<component2 :username="username"></component2>子组件传父组件子组件methods: { update() { t
2022-03-11 18:47:29
278
原创 new操作符具体做了什么
1.创建了一个空的对象function Foo() {}console.log(new Foo())2.将空对象的原型,指向于构造函数的原型function Foo() {}console.log(Foo.prototype == new Foo().__proto__)3.将空对象作为构造函数的上下文(改变this指向)function Foo() { console.log(this) this.name = "张三";}cons.
2022-03-03 20:24:35
133
原创 JavaScript深浅拷贝
对象类型在赋值的过程中其实是复制了地址,从而会导致改变了一方其他也都被改变的情况。通常在开发中我们不希望出现这样的问题,我们可以使用浅拷贝来解决这个情况。let a = { age: 1}let b = aa.age = 2console.log(b.age) // 2浅拷贝首先可以通过Object.assign来解决这个问题,很多人认为这个函数是用来深拷贝的。其实并不是,Object.assign只会拷贝所有的属性值到新的对象中,如果属性值是对象的话,拷贝的是地址,所以并不...
2022-03-02 11:36:55
168
原创 原生jsajax请求有几个步骤
创建XMLHttpRequest对象, 也就是创建一个异步调用对象. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. 设置响应HTTP请求状态变化的函数. 发送HTTP请求. 获取异步调用返回的数据. 使用JavaScript和DOM实现局部刷新....
2022-03-01 19:53:41
453
原创 JavaScript判断变量是不是数组
let a = [1, 2, 3];// 方法一:Array.isArray()console.log(Array.isArray(a));// 方法二:Array.prototype.isPrototypeOf()console.log(Array.prototype.isPrototypeOf(a));// 方法三:constructorconsole.log(a.constructor.toString().indexOf('Array'));// 方法四:Object.pro.
2022-03-01 15:08:12
408
原创 包装对象的使用
对象是 JavaScript 语言最主要的数据类型,三种原始类型的值——数值、字符串、布尔值——在一定条件下,也会自动转为对象,也就是原始类型的“包装对象”(wrapper)。所谓“包装对象”,指的是与数值、字符串、布尔值分别相对应的Number、String、Boolean三个原生对象。这三个原生对象可以把原始类型的值变成(包装成)对象。function mySplit(str, method, arg) { let obj = new String(str); return o
2022-02-28 17:17:37
215
原创 this的指向问题
// 直接调用function fn1() { console.log(this);}fn1(); // 指向的是window// 使用对象调用let fn2 = { name: '张三', getName: function () { console.log(this.name); }}fn2.getName();// 使用原型调用function fn3(name) { this.name = name;}fn3..
2022-02-28 17:15:02
124
原创 JavaScript常用数组
let list = [10, 20, 30, 40, 50, 40, 30, 20, 10, 11];// 又返回值let newList1 = list.map((item) => { if (item > 10) return item; return "";})console.log(newList1); // ['', 20, 30, 40, 50, 40, 30, 20, '', 11]// 无返回值(所循环到的元素、下标、遍历的数组)list.for.
2022-02-27 23:05:14
435
原创 v-model原理
<input placeholder="请输入名字" id="username">显示值:<p id="uName"></p>let obj = {};Object.defineProperty(obj, 'username', { get() { console.log("取值") }, set(v) { console.log("设置值") document.querySelector(.
2022-02-17 22:03:56
219
原创 数组与对象的解构
数组// ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构let [a, b, c] = [1, 2, 3]; // a:1 b:2 c:3// 这种写法属于'模式匹配',只要等号两边的模式相同,左边的变量就会被赋予对应的值let [aa, [[bb], cc]] = [1, [[2], 3]]; // aa:1 bb:2 cc:3let [, , z] = [1, 2, 3]; // z:3let [x, ...y] = [1, 2, 3, 4]; // x=1
2022-02-16 22:23:39
1052
原创 数组去重ES5和ES6
ES5let arr = [12, 13, 14, 12, 15, 14];let newArr = []for (let i = 0; i < arr.length; i++) { var current = arr[i]; if (newArr.indexOf(current) === -1) { newArr.push(current) }}console.log(newArr);ES6let arr = [12, 13, 14,
2022-02-15 23:39:36
111
原创 const、let、var的知识
var声明提升console.log(num); // undefinedvar num = 123;变量覆盖var num1 = 12;var num1 = 13;console.log(num1); // 13没有块级作用域function fn() { for (var i = 0; i < 3; i++) { console.log(i); } console.log(i);}fn();const1.co
2022-02-15 23:11:38
153
原创 递归求和1-100
function add(num1, num2) { let num = num1 + num2; if (num2 + 1 > 100) { return num; } else { return add(num, num2 + 1); }}let sum = add(1, 2);console.log(sum); // 5050
2022-02-15 22:13:41
596
原创 foreach()与map()
foreach1.forEach没有返回值2.forEach不能用break打断3.遍历的是value值let arr = ['a', 'b', 'c'];arr.forEach((e) => { console.log(e);})map1.map有返回值(数组)默认return是undefined2.接收的参数是一个参数(key,value)3.不能用break打断let arr = ['a', 'b', 'c'];let map = arr.map
2022-02-15 22:07:52
285
原创 JavaScript原型
原型链从当前实例属性去查找,如果找了就返回,否则顺着原型链一层一层往上面找 直到找到null为止,如果找到null都没有找到,报错function Person() {}Person.prototype.name = "张三";Person.prototype.age = 18;Person.prototype.getName = function () { console.dir(this.name)}let person = new Person();person.
2022-02-15 22:05:35
80
原创 过滤filter
let a = [1, 2, 3, 4, 10, 14, 15];// 1.current => 当前值 2.index => 当前的下标 3.array => 这个数组的对象let b = a.filter((current, index, array) => { console.log("current:", current) // 当前循环到的值 console.log("index:", index) // 循环到的下标 console.log(.
2022-02-14 23:13:21
147
原创 null和undefined
undefined1.声明,为赋值let o;console.log(o); // undefined2.对象某个属性不存在let obj = {}console.log(obj.a); // undefined3.少了参数function fn(a, b) { console.log(a, b); // 4 undefined}fn(4);4.方法的默认返回值function abcd() { console.log("111")}c
2022-02-14 23:11:42
209
原创 防抖与节流
防抖HTML代码部分<input class="inp" placeholder="输入字符">JavaScript代码部分<script> // 防抖 // 多次操作变成一次 let inp = document.querySelector(".inp"); inp.addEventListener('input', antiShake(demo, 2000)) function antiShake(fn, wait)
2022-02-11 00:28:42
238
原创 Vue3中setup调用生命周期钩子函数
介绍如果要在setup方法中调用组件生命周期钩子函数:在原来的生命周期钩子函数名称前加on关键字,并且需要保持小驼峰的命名方式。语法import {onMounted, onUpdated} from 'vue'export default { name: "Lifecycle", setup() { onMounted(() => { console.log("组件视图挂载完成") }); onUpdated(() => {
2022-01-08 19:53:04
4320
原创 Vue3的watch与computed
watch介绍通过计算属性我们能拿到处理后的数据, 但是通过函数我们也能拿到处理后的数据,只要返回的结果没有发生变化, 那么计算属性就只会被执行一次。Vue3写法setup() { const name = ref('漩涡鸣人'); const {username, password} = toRefs(reactive({ username: '宇智波带土', password: 'zs1262597806' })) watch
2022-01-08 12:22:23
1221
原创 vue3中computed的使用方式
用法import { computed, ref } from "@vue/reactivity";export default { setup() { const msg = ref("宇智波带土"); // 实现msg反转操作 const reverseMsg = computed(() => { return msg.value.split("").reverse().join(""); }); return { msg
2022-01-06 23:13:23
1259
原创 Vue动态改变数据
方式一:reactive注意点reactive参数必须是对象使用方式import { reactive} from "vue";export default { setup() { const obj = reactive({ name: "张三", }); return obj; }, methods: { updataName() { console.log("方法进来啦!"
2022-01-06 22:54:34
1271
原创 TypeScript剩余参数
使用方式(() => { function showMsg(str: number, ...args: number[]) { console.log(str); console.log(args) } showMsg(1, 2, 3, 4, 5, 6, 7)})()运行结果
2022-01-06 14:40:45
635
原创 TypeScript抽象类
介绍包含抽象方法(抽象方法一般没有任何的具体内容的实现),也可以包含实例方法,抽象类是不能被实例化,为了让子类进行实例化及实现内部的抽象方法使用方式(() => { // 定义一个抽象类 abstract class Animal { // 抽象方法 abstract eat(): any sayHi() { console.log('你好啊') } } // 定义
2022-01-06 14:24:56
465
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人