美文网首页web 杂谈
js赋值运算的理解

js赋值运算的理解

作者: 高少辉_骚辉 | 来源:发表于2017-05-21 13:24 被阅读6次

简介

  1. js引擎由于为了效率,很多时候的非直接量赋值都不是copy一份在赋值给新的变量,而是一个引用
    ps:直接量:直接值数字字符串等
  2. 为什么使用len = doms.length; 里的len效率要比doms.length高

js赋值运算的理解

我们先来看一个例子

var parent = {
    x : 1,
    y : 2
};
var child = parent;
child.x = 3;
console.log( parent.x ); //=>3

从上面这个例子可以看出,当把parent赋值给child的时候并不是把parent克隆一份然后再赋值给child,实则child只是parent的一个引用

而直接量可以这么解释

看例子:

var parent = 5;
var child = parent; //也可以说是把parent的引用赋值给child
child = 3; // 但是这里的 直接量3的引用把parent的引用给覆盖了 而其实parent也是引用这个直接量
console.log( parent ); //=>5

那有人可能会举这样的例子

var parent = 5;
var child = parent;
child.x = 2;
console.log( parent.x ); //=>undefined

说这里总是没有把paient的引用给覆盖了,而只是给child加了一个属性,那么为什么parent.x 为 undefined 呢?这里你可能要去看一下我之前的一篇博客了关于js的包装对象

为什么使用len = doms.length; 里的len效率要比doms.length高

因为使用 getElementsByTagName函数获取到的doms是一个动态的伪数组,length属性是一个动态计算的。所以当每次使用doms.lenth的时候都进行了一次计算,而把doms.length赋值给len以后 len存的是计算的结果,是一个直接量,故效率肯定高。

其它还有一些使用赋值运算会使效率提高,因为变量里放的是计算过后的结果,如:

  • var div = document.geElementById('div'); //此类的获取元素 div获得了直接的引用,下回就不用再由getElementById来计算引用

那么如果我们要copy一份第一个例子中的对象该怎么办?

遍历对象所有属性和方法,一一把属性方法复制过去

var parent = {
    x : 1,
    y : 2
};
var child = {};
for( var i in parent ){
    child[i] = parent[i];
}

而child.x 引用的直接量是parent.x而parent.x引用的直接量是1,所以它们引用同一个直接量,是不是有点绕,哈哈

相关文章

  • js赋值运算的理解

    简介 js引擎由于为了效率,很多时候的非直接量赋值都不是copy一份在赋值给新的变量,而是一个引用ps:直接量:直...

  • JavaScript 02 (运算符和选择结构)

    js的关系运算符,js的逻辑运算符,js的赋值运算符,js的运算符的优先级问题,js的自增和自减,js的选择结构 ...

  • js运算符

    js基础语法:运算符,判断语句,数据类型,js对象 一、运算符 赋值运算符 =算数运算符 +-*/% ++...

  • 2018-12-01

    赋值运算符 关系运算符 Unicode编码 相等运算符 条件运算符 运算符的优先级 代码块 js操作属性 js换肤...

  • JS隐性转换

    JS的运算符中,=,==,===这三个运算符对初学者而言,很容易混淆 = 是赋值运算符,用来给变量赋值 == 判...

  • 3、运算符

    JS有四种运算类型,分别是:算术运算、赋值运算、比较运算和逻辑运算。 算术运算符: 1、+ 加运算- 用于numd...

  • js运算符

    JS中为我们提供了三种逻辑运算符: 赋值运算符: = 可以将符号右侧的值赋值给符号左侧的变量 +=...

  • web前端入门到实战:js函数与作用域,了解函数基本概念

    通过js基础语法了解到js的值包含数字,字符串和布尔值;js运算符分为算数,赋值,比较和逻辑运算符;js的流程控制...

  • 06-JavaScript基础-赋值运算和自增自减

    赋值运算符 简单赋值运算符: = 复合赋值运算符: +=、-=、*=、/=、%= 简单赋值运算符格式: 变量 = ...

  • JavaScript基础--赋值运算和自增自减

    赋值运算符 简单赋值运算符: = 复合赋值运算符: +=、-=、*=、/=、%= 简单赋值运算符格式: 变量 = ...

网友评论

    本文标题:js赋值运算的理解

    本文链接:https://www.haomeiwen.com/subject/phnmxxtx.html