JS-小碎片

最新推荐文章于 2022-11-04 10:22:28 发布

置二

最新推荐文章于 2022-11-04 10:22:28 发布

阅读量198

点赞数

分类专栏：【JavaScript 相关】文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42675488/article/details/102496406

版权

【JavaScript 相关】专栏收录该内容

9 篇文章 0 订阅

订阅专栏

isWeiXinIOS(id) {
    var system = { 
        win: false, 
        mac: false, 
        xll: false, 
        ipad: false 
    }; 
    //检测平台  
    var p = navigator.platform;
    system.win = p.indexOf("Win") == 0;
    system.mac = p.indexOf("Mac") == 0;
    system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
    system.ipad = (navigator.userAgent.match(/iPad/i) != null) ? true : false;
    //跳转语句，如果是手机访问就自动跳转到wap.baidu.com页面
    if (system.win || system.mac || system.xll || system.ipad) {
        alert("在PC端上打开的");
    } else { 
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
            this.$Message.warning({
                content: '请点击右上角，用浏览器打开进行下载',
                duration: 4,
            });  
        } else {  
            if (id == 1) {
                window.location.href = ''
            }
        }  
    }
}

类和实例是大多数 面向对象编程语言 的基本概念。

1、类：类是对象的类型模板；
2、实例：实例是根据类创建的对象；

一、JS继承的6种方式：

原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改！

想要继承，就必须要提供个父类。（继承谁，提供继承的属性）

参考：https://www.cnblogs.com/Grace-zyy/p/8206002.html | https://www.liaoxuefeng.com/wiki/1022910821149312/1023021997355072（廖雪峰）

1、原型链继承

要点：让新实例的原型等于父类的实例。新实例通过原型共享父例的属性，只要有改动，两个都会变。

// 父类
function Person(name) {		// 为构造函数添加参数
	this.name = name;
	this.sum = function() {
		alert(this.name);
	}
}
Person.prototype.age=10;	// 为构造函数添加 原型属性
function Per() {
	this.name = 'ker';
}
Per.prototype = new Person();
let per1= new Per();
console.log(per1.age); //10

// 分析：instanceof -判断元素是否在另一个元素的原型链上
// per1 继承了 Person的属性，返回 true
console.log(per1 instanceof Person); //true

2、组合继承（组合原型链继承和借用构造函数继承）（常用）

用 .call() 和 .apply() 将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））
定义新的构造函数，并在内部用 call() 调用希望 “继承” 的构造函数，并绑定this

// 父类
function Person(name) {		// 为构造函数添加参数
	this.name = name;
	this.sum = function() {
		alert(this.name);
	}
}
Person.prototype.age=10;	// 为构造函数添加 原型属性
function Per(name) {
	Person.call(this, name); 	// 引入
}
Per.prototype = new Person();	// 原型链继承
let per1= new Per('jer');

console.log(per1.age); 	// 10 继承父类原型的属性
console.log(per1.name); // jer 继承父类构造函数属性

// 验证原型
console.log(per1.__proto__ === Per.prototype); 					// true
console.log(per1.__proto__.__proto__ === Person.prototype); 	// true

// 验证继承关系 instanceof || typeof
console.log(per1 instanceof Person); 	// true
console.log(per1 instanceof Per); 		// true
console.log(typeof shows);  // function

3、class 类

二、call() 和 apply() 以及 bind() 的区别

存在的意义：实现（多重）继承。

call 与 apply 的相同点：

方法的含义是一样的，即方法功能是一样的；
第一个参数的作用是一样的；

call 与 apply 的不同点：两者传入的列表形式不一样

call 可以传入多个参数；
apply 只能传入两个参数，所以其第二个参数往往是作为数组形式传入

方法定义：

apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。
call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。

例子1

let name='小s',
	age=17;
let obj={
	name='小d',
	obgAge: this.age,
	// 声明函数
	myFun:function() {
		consolge.log(this.name + '年龄' + this.age)
	}
}

consolge.log(obj.obgAge) 	// 17
obj.myFun();	// 小d年龄undefined

例子2

let fav='小d';
function shows() {
	consolge.log(this.fav);
}

shows();	// 小d

比较两者 this 差别：

第一个打印里面的 this 指向 obj
第二个全局声明的shows()函数 this 指向的是 window

call()、 apply()、 bind() 都是用来重定义 this 这个对象的！

bind（）、apply（）、call（）则是可以更改this指向的方法。
参考：https://segmentfault.com/a/1190000017462138

例1

call()、 apply()、 bind() 对比传参

let name='小s',
	age=17;
let obj={
	name='小d',
	obgAge: this.age,
	// 声明函数
	myFun:function() {
		consolge.log(this.name + '年龄' + this.age)
	}
}
let db={
	name: '德玛',
	age: 99,
}

obj.myFun();		// 小d年龄undefined   ----->  this 指向 对象obj
obj.myFun.call();	// 小d年龄17		  ----->  this 指向 window
obj.myFun.call(db); // 小d年龄99		  ----->  this 指向 对象db
obj.myFun.apply(db);
obj.myFun.bind(db)(); // 小d年龄99		  ----->  bind 返回的是一个新函数，必须调用才会被执行

例2

let name='小s',
	age=17;
let obj={
	name='小d',
	obgAge: this.age,
	// 声明函数
	myFun:function(fm, fb) {
		consolge.log(this.name + '年龄' + this.age + ',来自' + fm + '去往' + fb);
	}
}
let db={
	name: '德玛',
	age: 99,
}

obj.myFun.call(db, '江西', '深圳'); 	// 德玛年龄99，来自江西去往深圳
obj.myFun.apply(db, ['江西', '深圳']); 	// 德玛年龄99，来自江西去往深圳
obj.myFun.bind(db, '江西', '深圳')();

call()和apply() 同样可实现继承，唯一的区别就在于call()接收的是参数列表，而apply()则接收参数数组。

bind()的作用与call()和apply()一样，都是可以改变函数运行时上下文，区别是call()和apply()在调用函数之后会立即执行，而bind()方法调用并改变函数运行时上下文后，返回一个新的函数，供我们需要时再调用。

bind() 函数

bind 就是用来绑定上下文的，强制将函数的执行环境绑定到目标作用域中去。
https://github.com/lin-xin/blog/issues/7
https://blog.csdn.net/lovefengruoqing/article/details/80186401

// slice() 函数- 数组的 slice 方法
function list() {
  return Array.prototype.slice.call(arguments);  //将类数组转换成真正的数组
  // return Array.from(arguments).slice();   // es6 语法
}

function addArguments(arg1, arg2) {
    return arg1 + arg2;
}

var bindList = list.bind(null, 37);
var result = bindList(1, 2);
console.log(result);  // [37, 1, 2]

---

function func(a, b, c) {
    console.log(a, b, c);
}
var func1 = func.bind(null,'linxin');

func('A', 'B', 'C');            // A B C
func1('A', 'B', 'C');           // linxin A B
func1('B', 'C');                // linxin B C
func.call(null, 'linxin');      // linxin undefined undefined

三、深拷贝

https://ninecc.github.io/2019/04/22/js%E6%B7%B1%E6%B5%85%E6%8B%B7%E8%B4%9D/



//定义检测数据类型的功能函数
function checkedType(target) {
  	return Object.prototype.toString.call(target).slice(8, -1)
}
//实现深度克隆---对象/数组
function clone(target) {
	//判断拷贝的数据类型
	//初始化变量result 成为最终克隆的数据
	let result, targetType = checkedType(target)
	if (targetType === 'Object') {
		result = {}
	} else if (targetType === 'Array') {
		result = []
	} else {
		return target
	}
	//遍历目标数据
	for (let i in target) {
		//获取遍历数据结构的每一项值。
		let value = target[i]
		//判断目标结构里的每一值是否存在对象/数组
		if (checkedType(value) === 'Object' ||
			checkedType(value) === 'Array') { //对象/数组里嵌套了对象/数组
			//继续遍历获取到value值
			result[i] = clone(value)
		} else { //获取到value值是基本的数据类型或者是函数。
			result[i] = value;
		}
	}
	return result
}
var obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
};
var aa = clone(obj1)
aa.name = "前端大治";

console.log(aa);
console.log(obj1);

四、vue生命周期的理解

对象实时渲染到页面，用 Vue.set()方法更新数据。

原因是：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

	data() {
		return: {
	      form: {
	        sortcode: '',
	      },
		}
	},
    OnselectValue (value) {
      this.$set(this.form, 0, { sortcode: value })
    }

总共分为8个阶段 创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后：

在 beforeCreated 阶段，vue实例的挂载元素 $e l 和 * * 数据对象 * * d a t a 都为 u n d e f i n e d ，还未初始化。在 c r e a t e d 阶段， v u e 实例的数据对象 d a t a 有了，$ el还没有。

载入前/后：

在 beforeMount 阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.msg还未替换。在mounted阶段，vue实例挂载完成，data.msg成功渲染。

更新前/后：

当data变化时，会触发 beforeUpdate 和 updated 方法。

<div id="app">
    <h1>{{msg}}</h1>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Vue的生命周期'
        },
        beforeCreate: function() {
            console.group('------beforeCreate创建前的状态------');
            console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //undefined
            console.log("%c%s", "color:red","msg: " + this.msg)
        },
        created: function() {
            console.group('------created创建完毕的状态------');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","msg: " + this.msg); //已被初始化
        },
        beforeMount: function() {
            console.group('------beforeMount挂载前的状态------');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","msg: " + this.msg); //已被初始化
        },
        mounted: function() {
            console.group('------mounted 挂载结束状态------');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","msg: " + this.msg); //已被初始化
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","msg: " + this.msg);
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","msg: " + this.msg);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","msg: " + this.msg);
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","msg: " + this.msg)
        }
    })
</script>