首页 > 其他分享 >预解析+深浅拷贝+理解

预解析+深浅拷贝+理解

时间:2022-09-04 22:57:27浏览次数:80  
标签:function f1 console log 深浅 var 拷贝 解析

3、预解析+深浅拷贝+理解

window.onload = function(){

​ //封装一个方法 deep来实现对象的深拷贝

​ var Animal={

​ name: "duobi",

​ skin: ["red", "green"],

​ child: {

​ xxx: "xxx"

​ },

​ say: function(){

​ console.log("I am ", this.name, " skin:", this.skin)

​ }

​ }

​ function deep(dest, obj){ //dest = {},obj = Animal

​ var o = dest;

​ for (var key in obj) { // Key ==== 'name' 'child'

​ if (typeof obj[key] === 'object'){ //obj[key] === ["red", "green"] ,{xxx: "xxx"}

​ //constructor 判断类型是数组还是对象

​ o[key] = (obj[key].constructor===Array)?[]:{};

​ deep(o[key], obj[key]);

​ } else { //如果obj[key]不是对象类型,直接赋值

​ o[key] = obj[key]

​ }

​ }

​ return o;

​ };

​ var x = deep({},Animal);

​ // var o = {id:1,name:'fangfang'};

​ // var o2 = {};

​ // for(var k in o){

​ // o2[k] = o[k]

​ // }

​ //预解析

​ console.log(a);

​ var a = 10;

​ //解析过程

​ var a;

​ console.log(a); //undefined

​ a = 10;

​ console.log(b);

​ var b = 100;

​ function b(){

​ console.log(999)

​ };

​ //解析过程

​ //预解析

​ var b;

​ function b(){

​ console.log(999)

​ };

​ //逐行解析

​ console.log(b); //[Function: b]

​ b = 100;

​ //测试变量和函数的优先级

​ //预解析过程中,当变量和函数同名时:只留下函数的值,不管谁前谁后,所以函数优先级更高;

​ console.log(b);

​ function b(){

​ console.log(999)

​ };

​ var b = 100;

​ //解析过程

​ //预解析

​ function b(){

​ console.log(999)

​ };

​ var b;

​ //逐行解析

​ console.log(b); //[Function: b]

​ b = 100;

​ //扩展练习一

​ console.log(a,b,c,d,e);

​ var a = 10;

​ var b;

​ c = 100;

​ function d(){

​ console.log('d')

​ };

​ var e = function(){

​ console.log('e')

​ };

​ //解析过程

​ //预解析

​ var a;

​ var b;

​ function d(){

​ console.log('d')

​ };

​ var e;

​ //逐行解析

​ console.log(a,b,c,d,e); //a = undefined; b = undefined; c-报错; d=function(){}; e = undefined;

​ a = 10;

​ c = 100;

​ e = function(){

​ console.log('e')

​ };

​ //扩展练习二

​ console.log(a);

​ var a = 1;

​ function a(){console.log(2)};

​ console.log(a);

​ var a = 3;

​ console.log(a);

​ function a(){console.log(4)};

​ console.log(a);

​ //解析过程

​ //预解析

​ var a;

​ function a(){console.log(2)};

​ function a(){console.log(4)};

​ //逐行解析

​ console.log(a); //function a(){console.log(4)};

​ a = 1;

​ console.log(a); //1

​ a = 3;

​ console.log(a); //3

​ console.log(a); //3

​ //作用域

​ var a = 1; //全局作用域

​ function f1(){

​ var b = 2; //局部作用域 b属于f1下的作用域

​ function f2(){

​ var c = b; //局部作用域 c属于f2下的作用域

​ b = a;

​ a = c;

​ console.log(a,b,c) //2 1 2

​ };

​ f2();

​ };

​ f1();

​ //扩展

​ //1)

​ var a = 1;

​ function f1(){

​ console.log(a);

​ };

​ f1(); //1

​ //2)

​ function f1(){

​ var a = 1;

​ };

​ f1();

​ console.log(a); //a is not defined

​ //3)

​ var a = 1;

​ function f1(){

​ console.log(a); //1

​ a = 2; //改变全局变量的值

​ };

​ f1();

​ console.log(a); //2

​ //解析过程

​ //预解析

​ var a;

​ function f1(){}

​ //逐行解析

​ a = 1;

​ f1();

​ //函数执行

​ console.log(a); //1

​ a = 2;

​ console.log(a); //2

​ //4)

​ var a = 1;

​ function f1(){

​ console.log(a); //undefined

​ var a = 2; //在全局变量和局部变量同名时,全局变量的作用域不包含同名局部变量的作用域。

​ };

​ f1();

​ console.log(a); //1

​ //解析过程

​ //预解析

​ var a;

​ function f1(){}

​ //逐行解析

​ a = 1;

​ f1();

​ //函数执行

​ //预解析

​ var a;

​ console.log(a); ////undefined

​ a = 2;

​ console.log(a); //var a = 1; 1

​ //经典作用域面试题一

​ var a = 10;

​ function f1(){

​ var b = 2 * a;

​ var a = 20;

​ var c = a+1;

​ console.log(b);

​ console.log(c);

​ };

​ f1();

​ //解析过程

​ //预解析

​ var a;

​ function f1(){}

​ //逐行解析

​ a = 10;

​ f1()//函数执行

​ //函数内部的预解析

​ var b;

​ var a;

​ var c;

​ ////逐行解析

​ b = 2*a; //a = undefined 在全局变量和局部变量同名时,全局变量的作用域不包含同名局部变量的作用域

​ a = 20;

​ c = a+1;

​ console.log(b); //NaN

​ console.log(c); //21

​ ////经典作用域面试题二

​ var a=10;

​ function test(){

​ console.log(a); //undefined

​ a=100; //在全局变量和局部变量同名时,全局变量的作用域不包含同名局部变量的作用域

​ console.log(this.a); //this 指向window 10

​ var a;

​ console.log(a); //100

​ }

​ test();

​ //函数式编程与面向对象编程的异同

​ function sum(n1,n2){ //求和函数

​ return n1+n2

​ };

​ sum(1,2);

​ function selector(name){ //选择器封装

​ return document.querySelector(name)

​ }

​ selector(".div");

​ //对象 字面量方式

​ var obj = {

​ name:1,

​ age:20,

​ sum:function(n1,n2){

​ return n1+n2

​ },

​ selector:function(name){

​ return document.querySelector(name)

​ }

​ };

​ obj.sum(1,2)

}

标签:function,f1,console,log,深浅,var,拷贝,解析
From: https://www.cnblogs.com/jycom/p/16656409.html

相关文章

  • 深拷贝+封装
    深拷贝+封装window.onload=function(){​varobj={​"name":'small',​id:1,​age:18,​arr:[1,2,3],​o2:{id:2......
  • java复制文件的4种方式及拷贝文件到另一个目录下的实例代码
    java复制文件的4种方式及拷贝文件到另一个目录下的实例代码这篇文章主要介绍了java复制文件的4种方式,通过实例带给大家介绍了java拷贝文件到另一个目录下的方法,需要的......
  • 如何使用 ABAP 代码解析 XML 文件
    正如本教程的开篇介绍文章SAPOData开发教程-从入门到提高(包含SEGW,RAP和CDP)所提到的,SAPOData服务开发,从实现技术上来说,可以分为三大类。因此本教程也分为三大......
  • Oracle中行转列(pivot)函数解析(二)
    Oracle行转列就是把某一个字段的值作为唯一值,然后另外一个字段的行值转换成它的列值。案例原始数据如下:  方法一:利用groupby实现selectt.mr_sl_id,sum(......
  • oracle中merge into用法解析
    1mergeinto的形式mergeinto[target-table]ausing[source-tablesql]bon([conditionalexpression]and[...]...)whenmatchedthen[updat......
  • Python 中的深拷贝和浅拷贝
    一、结论首先说结论:深拷贝出来的对象就是完完全全的新对象,不管是对象本身(id),还是对象中包含的子对象,都和原始对象不一样;浅拷贝出来的对象就是外新内旧的对象,对象本身(id......
  • C# list 分片,对象深拷贝
    ///<summary>///list分片///</summary>///<typeparamname="T"></typeparam>///<paramname="list"></param>......
  • linux下Java上传解析excel报错java.io.FileNotFoundException:xxx.xls(No such file o
    原文链接:linux下Java上传解析excel报错java.io.FileNotFoundException:xxx.xls(Nosuchfileordirectory)–每天进步一点点(longkui.site)0.背景一个简单的上传并解......
  • Elastic.Apm 源码解析
    源码中有如下sample:1vardistributedTracingData=DistributedTracingData.TryDeserializeFromString(args[0]);23WriteLineToConsole($"Calleeprocessstar......
  • 记录 javascript canvas ImageData 解析
    数组的内容:data.length:w*h*4r:0-255g:0-255b:0-255a:0-255Math.round(255*a) 数组遍历:constdata=context.getI......