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
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 返回的是一个新函数,必须调用才会被执行
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和**数据对象**data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了, el和∗∗数据对象∗∗data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,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>