一、Object.prototype.toString() 的调用
对于 Object.prototype.toString()
方法,会返回一个形如 "[object XXX]"
的字符串。
如果对象的 toString()
方法未被重写,就会返回如上面形式的字符串。
({}).toString(); // => "[object Object]" Math.toString(); // => "[object Math]"
但是,大多数对象,toString()
方法都是重写了的,这时,需要用 call()
或 Reflect.apply()
等方法来调用。
var x = { toString() { return "X"; }, }; x.toString(); // => "X" Object.prototype.toString.call(x); // => "[object Object]" Reflect.apply(Object.prototype.toString, x, []); // => "[object Object]"
二、Object.prototype.toString()
的原理
对于 Object.prototype.toString.call(arg),若参数为 null 或 undefined,直接返回结果。
Object.prototype.toString.call(null); // => "[object Null]" Object.prototype.toString.call(undefined); // => "[object Undefined]"
若参数不为 null
或 undefined
,则将参数转为对象,再作判断。对于原始类型,转为对象的方法即装箱,此处不赘述。
转为对象后,取得该对象的 [Symbol.toStringTag]
属性值(可能会遍历原型链)作为 tag
,如无该属性,或该属性值不为字符串类型,则依下表取得 tag
, 然后返回 "[object " + tag + "]"
形式的字符串。
// Boolean 类型,tag 为 "Boolean" Object.prototype.toString.call(true); // => "[object Boolean]" // Number 类型,tag 为 "Number" Object.prototype.toString.call(1); // => "[object Boolean]" // String 类型,tag 为 "String" Object.prototype.toString.call(""); // => "[object String]" // Array 类型,tag 为 "String" Object.prototype.toString.call([]); // => "[object Array]" // Arguments 类型,tag 为 "Arguments" Object.prototype.toString.call((function() { return arguments; })()); // => "[object Arguments]" // Function 类型, tag 为 "Function" Object.prototype.toString.call(function(){}); // => "[object Function]" // Error 类型(包含子类型),tag 为 "Error" Object.prototype.toString.call(new Error()); // => "[object Error]" // RegExp 类型,tag 为 "RegExp" Object.prototype.toString.call(/\d+/); // => "[object RegExp]" // Date 类型,tag 为 "Date" Object.prototype.toString.call(new Date()); // => "[object Date]" // 其他类型,tag 为 "Object" Object.prototype.toString.call(new class {}); // => "[object Object]"
下面为部署了 Symbol.toStringTag
的例子。可以看出,属性值期望是一个字符串,否则会被忽略。
var o1 = { [Symbol.toStringTag]: "A" }; var o2 = { [Symbol.toStringTag]: null }; Object.prototype.toString.call(o1); // => "[object A]" Object.prototype.toString.call(o2); // => "[object Object]"
Symbol.toStringTag
也可以部署在原型链上:
class A {} A.prototype[Symbol.toStringTag] = "A"; Object.prototype.toString.call(new A()); // => "[object A]"
新标准引入了 [Symbol.toStringTag]
属性,是为了把此方法接口化,用于规范新引入的对象对此方法的调用。但对于“老旧”的对象,就只能直接输出值,以保证兼容性。
三、部署了此属性的内置对象
下面,我列出所有部署了此属性的内置对象。
- 三个容器对象。这类对象用作命名空间,用于存储同一类方法。
JSON[Symbol.toStringTag]; // => "JSON" Math[Symbol.toStringTag]; // => "Math" Atomics[Symbol.toStringTag]; // => "Atomic"
这三个对象的 toString()
都没有重写,直接调用 toString()
方法也可以得到相同的结果。
JSON.toString(); // => "[object JSON]" Math.toString(); // => "[object Math]" Atomics.toString(); // => "[object Atomics]"
2. 两个新引入的类型 BigInt
和 Symbol
。
BigInt.prototype[Symbol.toStringTag]; // => "BigInt" Symbol.prototype[Symbol.toStringTag]; // => "Symbol"
组件的封装
vue组件的定义
● 组件(Component)是Vue.js最强大的功能之一
● 组件可以扩展HTML元素,封装可重用代码
● 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能
● 有些情况下,组件也可以表现用 is 特性进行了扩展的原生的HTML元素
● 所有的Vue组件同时也都是Vue实例,所以可以接受相同的选项对象(除了一些根级特有的选项),并提供相同的生命周期钩子
vue组件的功能
1)能够把页面抽象成多个相对独立的模块
2)实现代码重用,提高开发效率和代码质量,使得代码易于维护
Vue组件封装过程
● 首先,使用Vue.extend()创建一个组件
● 然后,使用Vue.component()方法注册组件
● 接着,如果子组件需要数据,可以在props中接受定义
● 最后,子组件修改好数据之后,想把数据传递给父组件,可以使用emit()方法
组件使用流程详细介绍
1、组件创建---有3中方法,extend() <template id=''> <script type='text/x-template' id=''>
A、调用Vue.extend(),创建名为myCom的组件,template定义模板的标签,模板的内容需写在该标签下
var myCom = Vue.extend({ template: '<div>这是我的组件</div>' }) B、<template id='myCom'>标签创建,需要加上id属性 <template id="myCom"> <div>这是template标签构建的组件</div> </template> C、<script type='text/x-template' id='myCom'>,需加id属性,同时还得加type="text/x-template",加这个是为了告诉浏览器不执行编译里面的代码 <script type="text/x-template" id="myCom1"> <div>这是script标签构建的组件</div> </script>
2、注册组件----有2中方法,全局注册,局部注册
A1、全局注册:一次注册( 调用Vue.component( 组件名称,为组件创建时定义的变量 ) ),可在多个Vue实例中使用。
我们先用全局注册,注册上面例子中创建的myCom组件
Vue.component('my-com',myCom)
A2、全局注册语法糖:不需要创建直接注册的写法
Vue.component('my-com',{ 'template':'<div>这是我的组件</div>' })
'my-com'为给组件自定义的名字,在使用时会用到,后面myCom对应的就是上面构建的组件变量。
A3、如果是用template及script标签构建的组件,第二个参数就改为它们标签上的id值
Vue.component('my-com',{ template: '#myCom' })
B1、局部注册:只能在注册该组件的实例中使用,一处注册,一处使用
var app = new Vue({ el: '#app', components: { 'my-com': myCom } })
B2、局部注册语法糖:
var app = new Vue({ el: '#app', components: { 'my-com': { template: '<div>这是我的组件</div>' } } })
B3、<template>及<script>创建的组件,局部注册
var app = new Vue({ el: '#app', components: { 'my-com': { template: '#myCom' } } })
3、调用组件
只需要在调用组件的地方,写上组件名字的标签即可
<div> /*调用组件*/ <my-com></my-com> </div>
4、栗子
A、全局注册:新建一个html文件,引入vue.js,并且定义2个vue实例app1和app2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue组件</title> <script src="vue.js"></script> </head> <body> <div id="app1"> <my-com></my-com> </div> <div id="app2"> <my-com></my-com> </div> <script> /*创建组件*/ var myCom = Vue.extend({ template: '<div>这是我的组件</div>' }); /*全局注册组件*/ Vue.component('my-com',myCom); /*定义vue实例app1*/ var app1 = new Vue({ el: '#app1' }); /*定义vue实例app2*/ var app2 = new Vue({ el: '#app2' }); </script> </body> </html>
显示效果:
可以看到,全局注册的组件在实例app1和实例app2中都可以被调用。
B、局部注册:将创建的组件注册到实例app1下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue组件</title> <script src="vue.js"></script> </head> <body> <div id="app1"> <my-com></my-com> </div> <div id="app2"> <my-com></my-com> </div> <script> var myCom = Vue.extend({ template: '<div>这是我的组件</div>' }); // Vue.component('my-com',myCom); /*局部注册组件*/ var app1 = new Vue({ el: '#app1', components:{ 'my-com':myCom } }); var app2 = new Vue({ el: '#app2' }); </script> </body> </html>
可以看到只渲染了app1实例下的组件,app2实例虽然调用了该组件,但是因为这个组件没有在其内部注册,也没有全局注册,所以报错说找不到该组件。
C、template 和script标签创建组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue组件</title> <script src="vue.js"></script> </head> <body> <div id="app1"> <my-com></my-com> <my-com1></my-com1> </div> <template id="myCom"> <div>这是template标签构建的组件</div> </template> <script type="text/x-template" id="myCom1"> <div>这是script标签构建的组件</div> </script> <script> Vue.component('my-com1',{ //全局注册 template: '#myCom1' }); var app1 = new Vue({ el: '#app1', components:{ 'my-com':{ template: '#myCom' //局部注册 } } }); </script> </body> </html>
显示效果:
5、异步组件
vue作为一个轻量级前端框架,其核心就是组件化开发。我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件。我们在引用组件之时只需将组件页面引入,再注册即可使用。
当项目比较大型,结构比较复杂时,我们一般选用vue-cli脚手架去构建项目。因为vue-cli集成了webpack环境,使用单文件组件,开发更简单,易上手,尤其是在对组件的处理上。对于原生vue.js,我们就得将组件构建在同一个html的script标签下或者html的外部js中,所有组件集中在一块,不容易管理,这也是原生vue,js的一点不便之处
vue.js可以将异步组件定义为一个工厂函数。
使用$.get获取本地文件会跨域,所以要将项目部署到服务器中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue组件</title> <script src="vue.js"></script> <script type="text/javascript" src='jquery-3.1.1.min.js'></script> </head> <body> <div id="app1"> <head-com></head-com> </div> <script> Vue.component('head-com', function (resolve, reject) { $.get("a.html").then(function (res) { resolve({ template: res }) }); }); var app1 = new Vue({ el: '#app1' }); </script> </body> </html>
显示效果如下:
6、Vue中的props数据流
通过在注册组件中申明需要使用的props,然后通过props中与模板中传入的对应的属性名,去取用这些值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue组件</title> <script src="vue.js"></script> <script type="text/javascript" src='jquery-3.1.1.min.js'></script> </head> <body> <div id='app'> <my-component name="jiangjiang" come-from="guilin"></my-component> <!-- 然后在模板中通过属性传值的方式进行数据的注入 --> </div> <script> Vue.component('my-component', { props: ['name', 'comeFrom'], //在注册组件的时候通过props选项声明了要取用的多个prop // 在注册组件的模板中使用到props选项中声明的值 template: '<p>我叫:{{name}}, 我来自:{{comeFrom}}</p>', created: function () { console.log('在created钩子函数中被调用') console.log('我叫:', this.name) console.log('我来自:', this.comeFrom) } }) new Vue({ el: '#app' }) </script> </body> </html>
注意:
A、props取值的方式
在注册组件的模板内部template,直接通过prop的名称取值就Ok
template: '<p>我叫:{{name}}, 我来自:{{comeFrom}}</p>'
不在注册组件的模板内部template,用this.prop的方式
console.log('我来自:', this.comeFrom)
B、在template选项属性中,可以写驼峰命名法,也可以写短横线命名法
在HTML(模板)中,只能写短横线命名法
原因:vue组件的模板可以放在两个地方
a、Vue组件的template选项属性中,作为模板字符串
b、放在.html中[ 用script template标签创建的组件 ],作为HTML
问题在于HTML不区分大小写,所以在vue注册组件中通用的驼峰命名法,不适用于HTML中的Vue模板,在HTML中写入props属性,必须写短横线命名法(把原来props属性中的每个prop大写换成小写,并且在前面加“-”)
将6中的
<div id='app'> <my-component name="jiangjiang" come-from="guilin"></my-component> <!-- 然后在模板中通过属性传值的方式进行数据的注入 --> </div> 改成 <div id='app'> <my-component name="jiangjiang" comeFrom="guilin"></my-component> <!-- 然后在模板中通过属性传值的方式进行数据的注入 --> </div>
显示效果,第二个没有显示
异步组件的实现原理;异步组件的3种实现方式---工厂函数、Promise、高级函数
异步组件实现的本质是2次渲染,先渲染成注释节点,当组件加载成功后,在通过forceRender重新渲染
高级异步组件可以通过简单的配置实现loading resolve reject timeout 4种状态
继承
1、原型链继承
核心: 将父类的实例作为子类的原型
function Parent1() { this.name = 'parent1'; this.play = [1, 2, 3] } function Child1() { this.type = 'child2'; } Child1.prototype = new Parent1(); console.log(new Child1()); // 潜在的问题 let s1 = new Child1(); let s2 = new Child1(); s1.play.push(4); console.log(s1.play, s2.play); // [1,2,3,4] [1,2,3,4] // 两个实例使用的是同一个原型对象。它们的内存空间是共享的,当一个发生变化的时候,另外一个也随之进行了变化,这就是使用原型链继承方式的一个缺点。
特点:
1.非常纯粹的继承关系,实例是子类的实例,也是父类的实例
2.父类新增原型方法/原型属性,子类都能访问到
3.简单,易于实现
缺点:
1.要想为子类新增属性和方法,必须要在new Animal()这样的语句之后执行,不能放到构造器中
2.无法实现多继承
3.来自原型对象的所有属性被所有实例共享(来自原型对象的引用属性是所有实例共享的)
4.创建子类实例时,无法向父类构造函数传参
2、构造函数继承(借助 call)
核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)
function Parent1(){ this.name = 'parent1'; } Parent1.prototype.getName = function () { return this.name; } function Child1(){ Parent1.call(this); this.type = 'child1' } let child = new Child1(); console.log(child); // 没问题 console.log(child.getName()); // 会报错
特点:
1.解决了1中,子类实例共享父类引用属性的问题
2.创建子类实例时,可以向父类传递参数
3.可以实现多继承(call多个父类对象)
缺点:
1.实例并不是父类的实例,只是子类的实例
2.只能继承父类的实例属性和方法,不能继承原型属性/方法
3.无法实现函数复用,每个子类都有父类实例函数的副本,影响性能
3、组合继承(前两种组合)
核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用
function Parent3 () { this.name = 'parent3'; this.play = [1, 2, 3]; } Parent3.prototype.getName = function () { return this.name; } function Child3() { // 第二次调用 Parent3() Parent3.call(this); this.type = 'child3'; } // 第一次调用 Parent3() Child3.prototype = new Parent3(); // 手动挂上构造器,指向自己的构造函数 Child3.prototype.constructor = Child3; var s3 = new Child3(); var s4 = new Child3(); s3.play.push(4); console.log(s3.play, s4.play); // 不互相影响 console.log(s3.getName()); // 正常输出'parent3' console.log(s4.getName()); // 正常输出'parent3'
特点:
1.弥补了方式2的缺陷,可以继承实例属性/方法,也可以继承原型属性/方法
2.既是子类的实例,也是父类的实例
3.不存在引用属性共享问题
4.可传参
5.函数可复用
缺点:
调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)
4、原型式继承
ES5 里面的 Object.create 方法,这个方法接收两个参数:一是用作新对象原型的对象、二是为新对象定义额外属性的对象(可选参数)
let parent4 = { name: "parent4", friends: ["p1", "p2", "p3"], getName: function() { return this.name; } }; let person4 = Object.create(parent4); person4.name = "tom"; person4.friends.push("jerry"); let person5 = Object.create(parent4); person5.friends.push("lucy"); console.log(person4.name); // tom console.log(person4.name === person4.getName()); // true console.log(person5.name); // parent4 console.log(person4.friends); // ['p1', 'p2', 'p3', 'jerry', 'lucy'] console.log(person5.friends); // ['p1', 'p2', 'p3', 'jerry', 'lucy']
通过 Object.create 这个方法可以实现普通对象的继承,不仅仅能继承属性,同样也可以继承 getName 的方法。
第一个结果“tom”,比较容易理解,person4 继承了 parent4 的 name 属性,但是在这个基础上又进行了自定义。
第二个是继承过来的 getName 方法检查自己的 name 是否和属性里面的值一样,答案是 true。
第三个结果“parent4”也比较容易理解,person5 继承了 parent4 的 name 属性,没有进行覆盖,因此输出父对象的属性。
最后两个输出结果是一样,其实 Object.create 方法是可以为一些对象实现浅拷贝的。
5、寄生式继承
使用原型式继承可以获得一份目标对象的浅拷贝,然后利用这个浅拷贝的能力再进行增强,添加一些方法,这样的继承方式就叫作寄生式继承。
虽然其优缺点和原型式继承一样,但是对于普通对象的继承方式来说,寄生式继承相比于原型式继承,还是在父类基础上添加了更多的方法。
let parent5 = { name: "parent5", friends: ["p1", "p2", "p3"], getName: function() { return this.name; } }; function clone(original) { let clone = Object.create(original); clone.getFriends = function() { return this.friends }; return clone; } let person5 = clone(parent5); console.log(person5.getName()); // parent5 console.log(person5.getFriends()); // ['p1', 'p2', 'p3']
通过上面这段代码,我们可以看到 person5 是通过寄生式继承生成的实例,它不仅仅有 getName 的方法,而且可以看到它最后也拥有了 getFriends 的方法。
6、寄生组合式继承
结合第四种中提及的继承方式,解决普通对象的继承问题的 Object.create 方法,我们在前面这几种继承方式的优缺点基础上进行改造,得出了寄生组合式的继承方式,这也是所有继承方式里面相对最优的继承方式。
function clone (parent, child) { // 这里改用 Object.create 就可以减少组合继承中多进行一次构造的过程 child.prototype = Object.create(parent.prototype); child.prototype.constructor = child; } function Parent6() { this.name = 'parent6'; this.play = [1, 2, 3]; } Parent6.prototype.getName = function () { return this.name; } function Child6() { Parent6.call(this); this.friends = 'child5'; } clone(Parent6, Child6); Child6.prototype.getFriends = function () { return this.friends; } let person6 = new Child6(); console.log(person6); // child6 {name: "parent6",play: [1, 2, 3], friends: "child5"} console.log(person6.getName()); // parent6 console.log(person6.getFriends()); // child5
通过这段代码可以看出来,这种寄生组合式继承方式,基本可以解决前几种继承方式的缺点,较好地实现了继承想要的结果,同时也减少了构造次数,减少了性能的开销.
总体看下来,这六种继承方式中,寄生组合式继承是这六种里面最优的继承方式
ES6 提供了继承的关键字 extends
class Person { constructor(name) { this.name = name } // 原型方法 // 即 Person.prototype.getName = function() { } // 下面可以简写为 getName() {...} getName = function () { console.log('Person:', this.name) } } class Gamer extends Person { constructor(name, age) {
TS范式有哪些
一、泛型是什么?有什么作用
当我们定义一个变量不确定类型的时候有两种解决方式:
使用any
使用any定义时存在的问题:虽然 以 知道传入值的类型但是无法获取函数返回值的类型;另外也失去了ts类型保护的优势
使用泛型
泛型指的是在定义函数/接口/类型时,不预先指定具体的类型,而是在使用的时候在指定类型限制的一种特性。
二、泛型用法
2.1 在函数中使用泛型
function test <T> (arg:T):T{ console.log(arg); return arg; } test<number>(111);// 返回值是number类型的 111 test<string | boolean>('hahaha')//返回值是string类型的 hahaha test<string | boolean>(true);//返回值是布尔类型的 true
使用方式类似于函数传参,传什么数据类型,T就表示什么数据类型, 使用表示,T也可以换成任意字符串。
2.2 在接口中使用泛型
// 注意,这里写法是定义的方法哦 interface Search { <T,Y>(name:T,age:Y):T } let fn:Search = function <T, Y>(name: T, id:Y):T { console.log(name, id) return name; } fn('li',11);//编译器会自动识别传入的参数,将传入的参数的类型认为是泛型指定的类型
2.3 在类中使用泛型
class Animal<T> { name:T; constructor(name: T){ this.name = name; } action<T>(say:T) { console.log(say) } } let cat = new Animal('cat'); cat.action('mimi')
三、泛型约束
3.1使用接口约束泛型
interface Person { name:string; age:number; } function student<T extends Person>(arg:T):T { return arg; } student({name:'lili'});//类型 "{ name: string; }" 中缺少属性 "age",但类型 "Person" 中需要该属性 student({ name: "lili" , age:'11'});//不能将类型“string”分配给类型“number” student({ name: "lili" , age:11});
3.2 数组泛型
let arr:Array<number> =[1,2,3] === let arr:number[]=[1,2,3]
四、泛型工具类型
4.1 Partial
partial<T>的作用就是将某个类型中的属性全部变为可选项?
示例:
interface Person { name:string; age:number; } function student<T extends Person>(arg: Partial<T>):Partial<T> { return arg; }
4.2 Record
Record<K extends keyof any, T>的作用是将K中所有的属性转换为T类型;示例:
interface PageInfo { title: string } type Page = 'home'|'about'|'other'; const x: Record<Page, PageInfo> = { home: { title: "xxx" }, about: { title: "aaa" }, other: { title: "ccc" }, };
4.3 Pick
Pick<T, K extends keyof T>的作用是将某个类型中的子属性挑出来,变成包含这个类型部分属性的子类型,示例:
interface Todo { title:string, desc:string, time:string } type TodoPreview = Pick<Todo, 'title'|'time'>; const todo: TodoPreview ={ title:'吃饭', time:'明天' }
4.4 Exclude
Exclude<T,U>的作用是将某个类型中属于另一个类型的属性移除掉,示例:
type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c" const t:T0 ='b';
4.5 ReturnType
returnType<T>的作用是用于获取函数T的返回类型,示例:
type T0 = ReturnType<() => string>; // string type T1 = ReturnType<(s: string) => void>; // void type T2 = ReturnType<<T>() => T>; // {} type T3 = ReturnType<<T extends U, U extends number[]>() => T>; // number[] type T4 = ReturnType<any>; // any type T5 = ReturnType<never>; // any type T6 = ReturnType<string>; // Error type T7 = ReturnType<Function>; // Error
并行请求两个接口后再请求第三个
面试官问我,如何并行请求两个接口,拿到数据后再请求第三个接口?
完蛋,一时大脑一片空白,心想平时还真没遇到过类似场景。
最怕场面突然安静,寂静的几十秒中我惭愧的真想找个地缝钻进去。。。
一:Promise解决
对的,你没想错就是Promise的all方法。
我平时看的ES6关键时刻都到狗肚子去了,明明知道这个语法却联系不到实用场景上。
// 第一个请求 let p1 = new Promise((resolve) => { axios({ url: 'http://39.104.22.73:8081/ScoreRead/foreend', // 列表接口 method: 'post', }).then((resp) => { resolve(resp.data.data.num); }).catch(); }); // 第二个请求 let p2 = new Promise((resolve) => { axios({ url: 'http://39.104.22.73:8888/TagRead/foreend', // 标签列表接口 method: 'post', }).then((resp) => { resolve(resp.data.data.length); }).catch(); }); // 静态方法all的then方法就等同于,多个promise实例方法的多个then汇集 Promise.all([p1,p2]).then((value)=>{ console.log(value); $("#promise3").html(`${value[0]} + ${value[1]}`); // 这里可以再执行第三个请求 });
二:Axios的写法
function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // 两个请求现在都执行完成 }));
标签:一面,日得物,Vue,name,Object,29,toString,组件,prototype
From: https://www.cnblogs.com/mrkr/p/17514471.html