标签搜索
搜索到
107
篇与
的结果
-
typescript 学习笔记一 typescript环境的搭建安装环境npm install -g typescript配置typescript 在项目的更目录下新建一个tsconfig.json 配置如下{ "compilerOptions": { "target": "es5", "noImplicitAny": false, "module": "commonjs", "removeComments": true, "sourceMap": false, "outDir": "Golang/TypeScript/" } //"include":[ // "ts" // ], //"exclude": [ // "js" // ] } // target：编译之后生成的JavaScript文件需要遵循的标准。有三个候选项：es3、es5、es2015。 // noImplicitAny：为false时，如果编译器无法根据变量的使用来判断类型时，将用any类型代替。为true时，将进行强类型检查，无法推断类型时，提示错误。 // module：遵循的JavaScript模块规范。主要的候选项有：commonjs、AMD和es2015。为了后面与node.js保持一致，我们这里选用commonjs。 // removeComments：编译生成的JavaScript文件是否移除注释。 // sourceMap：编译时是否生成对应的source map文件。这个文件主要用于前端调试。当前端js文件被压缩引用后，出错时可借助同名的source map文件查找源文件中错误位置。 // outDir：编译输出JavaScript文件存放的文件夹。 // include、exclude：编译时需要包含/剔除的文件夹。编译ts执行tsc -w 会自动检查变化并自动编译typescript类型约束typescript 是超javascript有着类型的检测 let str :string; //这里定义str必须为一个字符串类型,否则会报错 str = '小米' console.log(str) //数组的类型定义 let arr :number[];//在[]前面定义数组元素的类型 arr = [1,2] console.log(arr) //第二种方式是使用数组泛型，Array<元素类型>： let list: Array<number> = [1, 2, 3]; //第三种方式是使用数组泛型，any类型 let list: any[] = [1, 2, 3]; //元组 let arr :[string,number,boolean]; arr = ['min',2,true] console.log(arr) //any let flag :any = null;//any类型可以赋值任何类型 //vold 某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void： fn():vold{ alert("TS") } //never never类型表示的是那些永不存在的值的类型。 例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never类型，当它们被永不为真的类型保护所约束时。 // 返回never的函数必须存在无法达到的终点 function error(message: string): never { throw new Error(message); } // 推断的返回值类型为never function fail() { return error("Something failed"); } // 返回never的函数必须存在无法达到的终点 function infiniteLoop(): never { while (true) { }接口接口的定义 interfaceinterface Person { firstName: string; lastName: string; }接口的作用:用来检测类型function allname(str:Person){ //str必须是Person的类型(接口一般配合类使用) console.log(str.firstName+str.lastName) } allname({firstName:"小",lastName:"米"})类类的定义classclass Name{ //类名必须大写 age:number;//类型必须提前定义 constructor(public firstName, public lastName){ this.age=18 } }接口和类的结合使用interface Person { firstName: string; lastName: string; } class Name{ age:number; constructor(public firstName, public lastName){ this.age=18 } } function allname(str:Person){ console.log(str) } allname(new Name('',''))枚举enum Color {Red, Green=0, Blue}; let ColorName:string = Color[0]; console.log(ColorName);使用enum定义默认是从0开始可以手动指定枚举值也可以通过枚举值获得它的名字Any类型Any类型及任何类型,在编译过程中不会检测类型.知道部分类型比如:let arr:Any[] = ["小米"];类型断言使用尖括号方式//("小米").indexOf('小');as方式//("小米" as string).indexOf('米');总结接口: 用来检测类型.类: 用来生成实例.多类型定义使用 | 隔开. -
vue-cli集成TypeScript 1- 安装ts-loader和typescriptnpm install --save-dev ts-loader@3 [email protected]使用的webpack为3, 所以必须使用ts-loader@32- 修改webpack.base.conf.js配置文件修改webpack.base.conf.js下的entry>app为'./src/main.ts' extensions: ['.js', '.vue', '.json', '.ts', '.tsx']//添加'.ts', '.tsx' 文件引入不用写后缀 rules: [ { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/], } },//添加tsloader加载器 ...其他 ]3- 在src目录下新建一个文件vue-shims.d.ts，用于识别单文件vue内的ts代码declare module "*.vue" { import Vue from "vue"; export default Vue; }4- 在项目根目录下建立TypeScript配置文件tsconfig.json{ "compilerOptions": { "strict": true, "module": "es2015", "moduleResolution": "node", "target": "es5", "allowSyntheticDefaultImports": true, "lib": [ "es2017", "dom" ] } } //"jsx": "preserve" jsx支持5- 修改main.js后缀改为ts, 添加引入文件的的后缀.6- 修改router.js后缀改为ts.7- 测试//下面可以测试是否集成成功，编辑src/components/Hello.vue文件，修改 <script lang="ts"> import Vue, {ComponentOptions} from 'vue' export default { name: 'hello', data() { return { msg: 'this is a typescript project now' } } } as ComponentOptions<Vue> </script>8- 配置官方推荐的，vue-class-component修改ts配置文件，增加以下两项配置"allowSyntheticDefaultImports": true,"experimentalDecorators": true,使用vue-class-component后，初始数据可以直接声明为实例的属性，而不需放入data() {return{}}中，组件方法也可以直接声明为实例的方法，如官方实例，更多使用方法可以参考其官方文档import Vue from 'vue' import Component from 'vue-class-component' // @Component 修饰符注明了此类为一个 Vue 组件 @Component({ // 所有的组件选项都可以放在这里 template: '<button @click="onClick">Click!</button>' }) export default class MyComponent extends Vue { // 初始数据可以直接声明为实例的属性 message: string = 'Hello!' // 组件方法也可以直接声明为实例的方法 onClick (): void { window.alert(this.message) } }问题1- ts 无法识别 requireyarn add @types/webpack-env -D
-
Web worker Web workerWeb Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。Web Worker 有以下几个使用注意点。（1）同源限制分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。（2）DOM 限制Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。（3）通信联系Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。（4）脚本限制Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。（5）文件限制Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。基本用法1 主线程主线程采用new命令，调用Worker()构造函数，新建一个 Worker 线程。var worker = new Worker('work.js');Worker()构造函数的参数是一个脚本文件，该文件就是 Worker 线程所要执行的任务。由于 Worker 不能读取本地文件，所以这个脚本必须来自网络。如果下载没有成功（比如404错误），Worker 就会默默地失败。然后，主线程调用worker.postMessage()方法，向 Worker 发消息。worker.postMessage('Hello World');worker.postMessage({method: 'echo', args: ['Work']});worker.postMessage()方法的参数，就是主线程传给 Worker 的数据。它可以是各种数据类型，包括二进制数据。接着，主线程通过worker.onmessage指定监听函数，接收子线程发回来的消息。worker.onmessage = function (event) { console.log('Received message ' + event.data); doSomething(); } function doSomething() { // 执行任务 worker.postMessage('Work done!'); }上面代码中，事件对象的data属性可以获取 Worker 发来的数据。Worker 完成任务以后，主线程就可以把它关掉。worker.terminate();2 Worker 线程Worker 线程内部需要有一个监听函数，监听message事件。self.addEventListener('message', function (e) { self.postMessage('You said: ' + e.data); }, false);上面代码中，self代表子线程自身，即子线程的全局对象。因此，等同于下面两种写法。// 写法一this.addEventListener('message', function (e) { this.postMessage('You said: ' + e.data); }, false);// 写法二addEventListener('message', function (e) { postMessage('You said: ' + e.data); }, false);除了使用self.addEventListener()指定监听函数，也可以使用self.onmessage指定。监听函数的参数是一个事件对象，它的data属性包含主线程发来的数据。self.postMessage()方法用来向主线程发送消息。根据主线程发来的数据，Worker 线程可以调用不同的方法，下面是一个例子。self.addEventListener('message', function (e) { var data = e.data; switch (data.cmd) { case 'start': self.postMessage('WORKER STARTED: ' + data.msg); break; case 'stop': self.postMessage('WORKER STOPPED: ' + data.msg); self.close(); // Terminates the worker. break; default: self.postMessage('Unknown command: ' + data.msg); }; }, false);上面代码中，self.close()用于在 Worker 内部关闭自身。3 Worker 加载脚本Worker 内部如果要加载其他脚本，有一个专门的方法importScripts()。importScripts('script1.js');该方法可以同时加载多个脚本。importScripts('script1.js', 'script2.js');4 错误处理主线程可以监听 Worker 是否发生错误。如果发生错误，Worker 会触发主线程的error事件。worker.onerror(function (event) { console.log([ 'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message ].join('')); });// 或者worker.addEventListener('error', function (event) { // ...});Worker 内部也可以监听error事件。5 关闭 Worker使用完毕，为了节省系统资源，必须关闭 Worker。// 主线程worker.terminate();// Worker 线程self.close();API1 主线程浏览器原生提供Worker()构造函数，用来供主线程生成 Worker 线程。var myWorker = new Worker(jsUrl, options);Worker()构造函数，可以接受两个参数。第一个参数是脚本的网址（必须遵守同源政策），该参数是必需的，且只能加载 JS 脚本，否则会报错。第二个参数是配置对象，该对象可选。它的一个作用就是指定 Worker 的名称，用来区分多个 Worker 线程。// 主线程var myWorker = new Worker('worker.js', { name : 'myWorker' });// Worker 线程self.name // myWorkerWorker()构造函数返回一个 Worker 线程对象，用来供主线程操作 Worker。Worker 线程对象的属性和方法如下。Worker.onerror：指定 error 事件的监听函数。Worker.onmessage：指定 message 事件的监听函数，发送过来的数据在Event.data属性中。Worker.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。Worker.postMessage()：向 Worker 线程发送消息。Worker.terminate()：立即终止 Worker 线程。2 Worker 线程Web Worker 有自己的全局对象，不是主线程的window，而是一个专门为 Worker 定制的全局对象。因此定义在window上面的对象和方法不是全部都可以使用。Worker 线程有一些自己的全局属性和方法。self.name： Worker 的名字。该属性只读，由构造函数指定。self.onmessage：指定message事件的监听函数。self.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。self.close()：关闭 Worker 线程。self.postMessage()：向产生这个 Worker 线程发送消息。self.importScripts()：加载 JS 脚本。实例：Worker 线程完成轮询有时，浏览器需要轮询服务器状态，以便第一时间得知状态改变。这个工作可以放在 Worker 里面。function createWorker(f) { var blob = new Blob(['(' + f.toString() +')()']); var url = window.URL.createObjectURL(blob); var worker = new Worker(url); return worker; } var pollingWorker = createWorker(function (e) { var cache; function compare(new, old) { ... }; setInterval(function () { fetch('/my-api-endpoint').then(function (res) { var data = res.json(); if (!compare(data, cache)) { cache = data; self.postMessage(data); } }) }, 1000) }); pollingWorker.onmessage = function () { // render data } pollingWorker.postMessage('init');上面代码中，Worker 每秒钟轮询一次数据，然后跟缓存做比较。如果不一致，就说明服务端有了新的变化，因此就要通知主线程。
-
-
React 16 生命周期函数 1.constructor(props)react组件的构造函数在挂载之前被调用。在实现React.Component构造函数时，需要先在添加其他内容前，调用super(props)，用来将父组件传来的props绑定到这个类中，使用this.props将会得到。官方建议不要在constructor引入任何具有副作用和订阅功能的代码，这些应当在componentDidMount()中写入。constructor中应当做些初始化的动作，如：初始化state，将事件处理函数绑定到类实例上，但也不要使用setState()。如果没有必要初始化state或绑定方法，则不需要构造constructor，或者把这个组件换成纯函数写法。当然也可以利用props初始化state，在之后修改state不会对props造成任何修改，但仍然建议大家提升状态到父组件中，或使用redux统一进行状态管理。constructor(props) { super(props); this.state = { color: props.initialColor }; }2.static getDerivedStateFromProps(nextProps, prevState)getDerivedStateFromProps在组件实例化后，和接受新的props后被调用。他返回一个对象来更新状态，或者返回null表示新的props不需要任何state的更新。如果是由于父组件的props更改，所带来的重新渲染，也会触发此方法。调用steState()不会触发getDerivedStateFromProps()。3. componentWillMount() / UNSAFE_componentWillMount()componentWillMount()将在react未来版本中被弃用。UNSAFE_componentWillMount()在组件挂载前被调用，在这个方法中调用setState()不会起作用，是由于他在render()前被调用。为了避免副作用和其他的订阅，官方都建议使用componentDidMount()代替。这个方法是用于在服务器渲染上的唯一方法。4.render()render()方法是必需的。当他被调用时，他将计算this.props和this.state，并返回以下一种类型：React元素。通过jsx创建，既可以是dom元素，也可以是用户自定义的组件。字符串或数字。他们将会以文本节点形式渲染到dom中。Portals。react 16版本中提出的新的解决方案，可以使组件脱离父组件层级直接挂载在DOM树的任何位置。null，什么也不渲染布尔值。也是什么都不渲染，通常后跟组件进行判断。当返回null,false,ReactDOM.findDOMNode(this)将会返回null，什么都不会渲染。render()方法必须是一个纯函数，他不应该改变state，也不能直接和浏览器进行交互，应该将事件放在其他生命周期函数中。 如果shouldComponentUpdate()返回false，render()不会被调用。Fragments你也可以在render()中使用数组，如：(不要忘记给每个数组元素添加key，防止出现警告)render() { return [ <li key="A">First item</li>, <li key="B">Second item</li>, <li key="C">Third item</li>, ]; } ```` 换一种写法，可以不写key（v16++）render() { return (<React.Fragment> <li>First item</li> <li>Second item</li> <li>Third item</li> </React.Fragment>);}**5.componentWillReceiveProps()**/ UNSAFE_componentWillReceiveProps(nextProps) 官方建议使用getDerivedStateFromProps函数代替componentWillReceiveProps()。当组件挂载后，接收到新的props后会被调用。如果需要更新state来响应props的更改，则可以进行this.props和nextProps的比较，并在此方法中使用this.setState()。 如果父组件会让这个组件重新渲染，即使props没有改变，也会调用这个方法。 react不会在组件初始化props时调用这个方法。调用this.setState也不会触发。 **6.shouldComponentUpdate(nextProps, nextState)** 调用shouldComponentUpdate使react知道，组件的输出是否受state和props的影响。默认每个状态的更改都会重新渲染，大多数情况下应该保持这个默认行为。 在渲染新的props或state前，shouldComponentUpdate会被调用。默认为true。这个方法不会在初始化时被调用，也不会在forceUpdate()时被调用。返回false不会阻止子组件在state更改时重新渲染。 如果shouldComponentUpdate()返回false，componentwillupdate,render和componentDidUpdate不会被调用。 在未来版本，shouldComponentUpdate()将会作为一个提示而不是严格的指令，返回false仍然可能导致组件的重新渲染。 官方并不建议在shouldComponentUpdate()中进行深度查询或使用JSON.stringify()，他效率非常低，并且损伤性能。 **7.UNSAFE_componentWillUpdate(nextProps, nextState)** 在渲染新的state或props时，UNSAFE_componentWillUpdate会被调用，将此作为在更新发生之前进行准备的机会。这个方法不会在初始化时被调用。 不能在这里使用this.setState()，也不能做会触发视图更新的操作。如果需要更新state或props，调用getDerivedStateFromProps。 **8.getSnapshotBeforeUpdate()** 在react render()后的输出被渲染到DOM之前被调用。它使您的组件能够在它们被潜在更改之前捕获当前值（如滚动位置）。这个生命周期返回的任何值都将作为参数传递给componentDidUpdate（）。 **9.componentDidUpdate(prevProps, prevState, snapshot)** 在更新发生后立即调用componentDidUpdate()。此方法不用于初始渲染。当组件更新时，将此作为一个机会来操作DOM。只要您将当前的props与以前的props进行比较（例如，如果props没有改变，则可能不需要网络请求），这也是做网络请求的好地方。 如果组件实现getSnapshotBeforeUpdate()生命周期，则它返回的值将作为第三个“快照”参数传递给componentDidUpdate()。否则，这个参数是undefined。 **10.componentWillUnmount()** 在组件被卸载并销毁之前立即被调用。在此方法中执行任何必要的清理，例如使定时器无效，取消网络请求或清理在componentDidMount（）中创建的任何监听。 **11.componentDidCatch(error, info)** 错误边界是React组件，可以在其子组件树中的任何位置捕获JavaScript错误，记录这些错误并显示回退UI，而不是崩溃的组件树。错误边界在渲染期间，生命周期方法以及整个树下的构造函数中捕获错误。 如果类组件定义了此生命周期方法，则它将成为错误边界。在它中调用setState()可以让你在下面的树中捕获未处理的JavaScript错误，并显示一个后备UI。只能使用错误边界从意外异常中恢复;不要试图将它们用于控制流程。详细
-
script标签加载 阻塞式脚本每一个script标签,下载和执行都会阻塞页面的渲染.多个script标签加载, 会依次下载执行,后者都必须等待前者下载并执行.非阻塞式脚本延迟脚本加载在HTML4中script标签扩展了也defer属性, 该属性以支持主流浏览器. 有defer属性的script标签,会在浏览器解析到script标签时开始下载, 不会立即执行.会在月面加载完成后执行.即window.onload事件处理之前被执行.asyncasync="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）动态加载script既使用dom操作在页面动态添加script标签. 建议添加在页面的head标签里(这样更为安全, ie在body为加载完时, 可能会抛出一个"操作终止"的错误信息),在script标签添加到页面时开始下载并且执行.不会阻塞页面.在script标签接收完成时会触发一个onload事件,IE着为onreadystatechange(用script.readyState判断不同阶段.主要使用loaded,complete判断)var loadScript = function(url,callback){ var script = document.createElement('script'); script.type = "text/javascript"; if(script.readyState){//IE script.onreadystatechange = function(){ if(script.readyState == 'loaded' || script.readyState == 'complete'){ script.onreadystatechange = nuul;//阻止重复调用 callback(); } } }else{ script.onload = function(){ callback(); } } script.src = url; document.getElementByTagName('head')[0].appendChild(script) }
-
Reaact-Native环境搭建 环境依赖Node, Python2, JDK1.8npm install -g react-native-clireact-native init '项目名称'react-native run-androidAndroid Studio安装SDK环境可选自定义安装, 建议不使用Android Studio的模拟器(性能底下).JDK环境配置 (1)新建->变量名"JAVA_HOME"，变量值"C:\Java\jdk1.8.0_05"（即JDK的安装路径） (2)编辑->变量名"Path"，在原变量值的最后面加上“;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin” (3)新建->变量名“CLASSPATH”,变量值“. %JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar SDK环境配置 在环境变量Path添加adb,android路径
-
React-Native Text Text嵌套文本主件可以继承fontFamily样式.在IOS端文本主件可以嵌套容器.Propsselectable 决定用户是否可以长按选择文本，以便复制和粘贴。falsenumberOfLines 用来当文本过长的时候裁剪文本。包括折叠产生的换行在内，总的行数不会超过这个属性的限制。此属性一般和ellipsizeMode搭配使用。 NumberonLayout 在加载时或者布局变化以后调用，参数为如下的内容：FunctiononLongPress 当文本被长按以后调用此回调函数。FunctiononPress 当文本被点击以后调用此回调函数。FunctionallowFontScaling 控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为trueselectionColor 文本选中的颜色styletextShadowOffset: object: {width: number,height: number}color: colorfontSize: numberfontStyle: enum('normal', 'italic')fontWeight: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')指定字体的粗细。大多数字体都支持'normal'和'bold'值。并非所有字体都支持所有的数字值。如果某个值不支持，则会自动选择最接近的值。lineHeight: numbertextAlign: enum('auto', 'left', 'right', 'center', 'justify')指定文本的对齐方式。其中'justify'值仅iOS支持，在Android上会变为left。textDecorationLine: enum('none', 'underline', 'line-through', 'underline line-through')textShadowColor: colorfontFamily: stringtextShadowRadius: numberincludeFontPadding: bool (Android)Android在默认情况下会为文字额外保留一些padding，以便留出空间摆放上标或是下标的文字。对于某些字体来说，这些额外的padding可能会导致文字难以垂直居中。如果你把textAlignVertical设置为center之后，文字看起来依然不在正中间，那么可以尝试将本属性设置为false。默认值为true。textAlignVertical: enum('auto', 'top', 'bottom', 'center') (Android)fontVariant: array of enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums') (iOS)letterSpacing: numberIncrease or decrease the spacing between characters. The default is 0, for no extra letter spacing.iOS: The additional space will be rendered after each glyph.Android: Only supported since Android 5.0 - older versions will ignore this attribute. Please note that additional space will be added around the glyphs (half on each side), which differs from the iOS rendering. It is possible to emulate the iOS rendering by using layout attributes, e.g. negative margins, as appropriate for your situation.textDecorationColor: color (iOS)textDecorationStyle: enum('solid', 'double', 'dotted', 'dashed') (iOS)textTransform: enum('none', 'uppercase', 'lowercase', 'capitalize')writingDirection: enum('auto', 'ltr', 'rtl') (iOS)
-
CSS动画 一. transform转换transform-origin(x,y)基位translate(x,y)拉伸scale(x,y)缩放rotate(Xdeg)旋转skew(xdeg,ydeg)倾斜二. transition过度transition-property 指定CSS属性的name，transition效果(all全部属性)transition-duration transition效果需要指定多少秒或毫秒才能完成transition-timing-function 指定transition效果的转速曲线(默认ease)transition-delay 定义transition效果延迟的时间三. @keyframes逐帧动画0-100%from（与 0% 相同）to（与 100% 相同）四. animation动画animation-name 规定需要绑定到选择器的 keyframe 名称。。animation-duration 规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function 规定动画的速度曲线。(ease)animation-delay 规定在动画开始之前的延迟。animation-iteration-count 规定动画应该播放的次数。(infinite无限)animation-direction 规定是否应该轮流反向播放动画。五. box-shadow盒子阴影h-shadow 必需的。水平阴影的位置。允许负值v-shadow 必需的。垂直阴影的位置。允许负值blur 可选。模糊距离spread 可选。阴影的大小color 可选。阴影的颜色inset 可选。从外层的阴影（开始时）改变阴影内侧阴影六. text-shadow文字阴影h-shadow 必需。水平阴影的位置。允许负值。v-shadow 必需。垂直阴影的位置。允许负值。blur 可选。模糊的距离。color 可选。阴影的颜色。参阅 CSS 颜色值。
-
js继承 //ES6的类及继承 { class Test { constructor(obj) { this.name = obj.name; } action() { console.log('打豆豆!') } } class Test1 extends Test { constructor(obj) { super(obj); this.age = obj.age; } } let instance = new Test1({ name: '小米', age: '18' }); console.log(instance); } //ES5的类和继承(构造函数模式)) //实例的constructor指向当前对象的构造函数 es5的继承{ function Test(obj) { this.name ? this.name = obj.name : this.name = null; this.action = function() { console.log('打豆豆!'); } } function Test1(obj) { // Test.apply(this, arguments) this.age = obj.age; } //原型链继承(父类的实例作为子类原型) //优点: //简单 //实例是父类的实例也是子类的实例 //缺点: //无法向父级传参. //实例丢失constructor //无法实现多继承 Test1.prototype = new Test(); Test1.prototype.constructor = Test; var instance = new Test1({ name: '小米1', age: '18' }); console.log(instance) }
