Vue js with语句原理及用法解析

2024-08-21 21:18:57

vue源码中编译部分有下面一段代码，里面用到了with：

export function generate (
 ast: ASTElement | void,
 options: CompilerOptions
): CodegenResult {
 const state = new CodegenState(options)
 const code = ast ? genElement(ast, state) : '_c("div")'
 return {
  render: `with(this){return $[code]}`,
  staticRenderFns: state.staticRenderFns
 }
}

下面详细解释一下with的用法：

js中我们常用的一种类型是对象：

let obj = {
  a:"aa",
  b:"bb",
  c:"cc"
}

而提到对象，我们要获取它中的属性值，可以使用如下方法：

// 一：
let a = obj.a
//二：
let b = ojb["b"]

取出对象中的每一个属性值，我们都需要obj....，这样无形中会输入很多次obj，那么我们如何简单的获取到它的属性值呢。

1、常规的方法：

var a = obj.a;
var b = obj.b;
var c = obj.c;

2、使用with后的方法：

with(obj){
  var a = a;
  var b = b;
  var c = c;
}

这里with括号中的值就是我们的公共对象，下面就是每个对象中的值

var qs1 = location.search.substring(1);
var hostname1 = location.hostname;
var url1 = location.href;

// 上面几行代码都包含了location对象，可使用with语句简写为以下形式

with(location){
  var qs2 = search.substring(1);
  var hostname2 = hostname;
  var url2 = href;
}

只要无疑会大大提高我们的效率。

但是凡事都有利弊，我们也不得不提提with的缺点：

由于大量使用with语句会导致性能下降，同时也会给调试代码造成困难，因此在开发大型应用程序时，不建议使用with语句

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

浅谈js中startsWith 函数不能在任何浏览器兼容的问题

在做js测试的时候用到了startsWith函数,但是他并不是每个浏览器都有的,所以我们一般要重写一下这个函数,具体的用法可以稍微总结一下在有些浏览器中他是undefined 所以我们可以这样的处理一下. if (typeof String.prototype.startsWith != 'function') { String.prototype.startsWith = function (prefix){ return this.slice(0, prefix.length) === p
理解javascript中的with关键字

说起js中的with关键字,很多小伙伴们的第一印象可能就是with关键字的作用在于改变作用域,然后最关键的一点是不推荐使用with关键字.听到不推荐with关键字后,我们很多人都会忽略掉with关键字,认为不要去管它用它就可以了.但是有时候,我们在看一些代码或者面试题的时候,其中会有with关键字的相关问题,很多坑是你没接触过的,所以还是有必要说说with这一个关键字. 一.基本说明在js高级程序设计中是这样描述with关键字的:with语句的作用是将代码的作用域设置到一个特定的作用域中,基本
javascript中with()方法的语法格式及使用

内容导读: 有了 With 语句,在存取对象属性和方法时就不用重复指定参考对象,在 With 语句块中,凡是 JavaScript 不识别的属性和方法都和该语句块指定的对象有关.With 语句的语法格式如下所示: With Object { Statements } 对象指明了当语句组中对象缺省时的参考对象,这里我们用较为熟悉的 Document 对象对 With 语句举例.例如当使用与 Document 对象有关的 write( )或 writeln( )方法时,往往使用如下形式: docu
javascript自定义startWith()和endWith()的两种方法

一.采用正则表达式实现startWith.endWith效果函数复制代码代码如下: String.prototype.startWith=function(str){ var reg=new RegExp("^"+str); return reg.test(this); } //测试ok,直接使用str.endWith("abc")方式调用即可 String.prototype.endWith=function(str){ var reg=new RegExp(
深入浅析javascript函数中with

/*js函数中with函数的用法分析定义方便用来引用某个对象中已有的属性但是不能用来给对象添加属性要给对象创建新的属性必须明确的引用该对象*/ 代码格式 with(object) statements object:新的默认对象 statements:一个或多个语句 oject是该语句的默认对象 with 语句通常用来缩短特定情形下必须写的代码量. x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10) y = Math.tan(14 * Ma
Javascript中实现String.startsWith和endsWith方法

在操作字符串(String)类型的时候,startsWith(anotherString)和endsWith(anotherString)是非常好用的方法.其中startsWith判断当前字符串是否以anotherString作为开头,而endsWith则是判断是否作为结尾.举例: "abcd".startsWith("ab"); // true "abcd".startsWith("bc"); // false "
javascript之with的使用(阿里云、淘宝使用代码分析)

记得还在懵懂学习JavaScript基础之时,坊间便有传言"with语句是低效率语句,若非必要,请不要使用该语句",同时, ECMAScript 5 的strict mode下是禁止使用with语句的,所以一直以来我对with语句一直没啥好感. 今天在知乎有个话题大概说的是"你觉得什么东西相当有B格"之类的,然后就有人贴了这段代码: with(document)with(body)with(insertBefore(createElement("scrip
JS中with的替代方法与String中的正则方法详解

with 语法在代码中,要执行这么一个函数 function computeExpression(exp, scope) { try { with (scope) { return eval(exp); } } catch (e) { console.error('ERROR', e); } } 要求在scope 作用域中执行,什么意思??? 比如 scope = {a:10,b:5}; exp = a*b; 要求计算结果为15,这种情况,常规情况下要使用 with语法. 但是: js的解释器
Vue js with语句原理及用法解析

vue源码中编译部分有下面一段代码,里面用到了with: export function generate ( ast: ASTElement | void, options: CompilerOptions ): CodegenResult { const state = new CodegenState(options) const code = ast ? genElement(ast, state) : '_c("div")' return { render: `with(th
vue.js diff算法原理详细解析

目录 diff算法的概念虚拟Dom h函数 diff对比规则 patch patchVnode updateChildren 总结 diff算法的概念 diff算法可以看作是一种对比算法,对比的对象是新旧虚拟Dom.顾名思义,diff算法可以找到新旧虚拟Dom之间的差异,但diff算法中其实并不是只有对比虚拟Dom,还有根据对比后的结果更新真实Dom. 虚拟Dom 上面的概念我们提到了虚拟Dom,相信大家对这个名词并不陌生,下面为大家解释一下虚拟Dom的概念,以及diff算法中为什么要对比虚拟
js回调函数原理与用法案例分析

本文实例讲述了js回调函数原理与用法.分享给大家供大家参考,具体如下: 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应. 函数指针是指向函数的指针变量. 因此"函数指针"本身首先应是指针变量,只不过该指针变量指向函数. 函数指针有两个用途:调用函数和做函数的参数. 作用:
Vue 的双向绑定原理与用法揭秘

本文实例讲述了Vue 的双向绑定原理与用法.分享给大家供大家参考,具体如下: Vue 中需要输入什么内容的时候,自然会想到使用 <input v-model="xxx" /> 的方式来实现双向绑定.下面是一个最简单的示例 <div id="app"> <h2>What's your name:</h2> <input v-model="name" /> <div>Hello
JS严格模式原理与用法实例分析

本文实例讲述了JS严格模式原理与用法.分享给大家供大家参考,具体如下: 使用 "use strict" 指令 "use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增. 它不是一条语句,但是是一个字面量表达式,在 JavaScript 旧版本中会被忽略. 支持严格模式的浏览器: Internet Explorer 10 +. Firefox 4+ Chrome 13+. Safari 5.1+. Opera 12+.
JS回调函数原理与用法详解【附PHP回调函数】

本文实例讲述了JS回调函数原理与用法.分享给大家供大家参考,具体如下: JS回调函数何为回调函数,官方解释:当程序跑起来时,一般情况下,应用程序(application program)会时常通过API调用库里所预先备好的函数.但是有些库函数(library function)却要求应用先传给它一个函数,好在合适的时候调用,以完成目标任务.这个被传入的.后又被调用的函数就称为回调函数(callback function). 通常将一个函数B传入另一个函数A,并且在需要的时候再调用函数A. 说白
Java图形界面Swing原理及用法解析

这篇文章主要介绍了Java图形界面Swing原理及用法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 JButton组件布局管理器 FlowLayout 流式布局 BorderLayout 方位布局 GridLayout 表格布局绝对布局 JLable 组件文本框组件 JPanel轻量级容器创建事件监听类 (更换监听类实现监听) 窗口监听适配器都可使用匿名类实现监听每个监听方法都可以返回一个Event对象来返回监听值以上就是本
Node.js assert断言原理与用法分析

本文实例讲述了Node.js assert断言原理与用法.分享给大家供大家参考,具体如下: node.js官方API中文版 http://nodeapi.ucdok.com/#/api/assert.html assert 模块主要用于编写程序的单元测试时使用,通过断言可以提早发现和排查出错误. class : assert - assert.fail(actual, expected, message, operator) - assert(value, message), assert.ok
Python partial函数原理及用法解析

这篇文章主要介绍了Python partial函数原理及用法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下介绍 partial其实是Python模块functools中定义的一个函数,当我们需要经常调用某个函数时,但是其中某些参数是已知的固定值,这样可能会让代码显得冗余,这个时候就可以考虑使用partial函数. 使用假设我们要做二进制转十进制 int('1000000', base=2) # 64 int('1010101', bas
Python openpyxl模块原理及用法解析

这篇文章主要介绍了Python openpyxl模块原理及用法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下此模块不是Python内置的模块需要安装,安装方法如下 pip install openpyxl 注意: 此模块只支持offce 2010,即是电子表格后缀是*.xlsx 1.openpyxl模块常用函数 import openpyxl wb = openpyxl.load_workbook('example.xlsx') ####

Vue js with语句原理及用法解析

相关推荐

随机推荐