JSON对象使用场景以及this 关键字的几个方法

时间:2019-08-30
本文章向大家介绍JSON对象使用场景以及this 关键字的几个方法,主要包括JSON对象使用场景以及this 关键字的几个方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

JSON对象

JSON.stringify 将 json或者json数组转换成字符串json

  • JSON.parse 是将 json 格式的字符串转换为 js 的对象或者数组

    var obj = {
     name: 'Jack',
     age: 18,
     gender: '男'
    }
    var arr = [
    {
       name: 'Jack',
       age: 18,
       gender: '男'
    },
    {
       name: 'Jack',
       age: 18,
       gender: '男'
    },
    {
       name: 'Jack',
       age: 18,
       gender: '男'
    }
    ]

    var jsonObj = JSON.stringify(obj)
    var jsonArr = JSON.stringify(arr)

    console.log(jsonObj)
    console.log(jsonArr)

    对象深克隆
    var obj = {
    a:10,
    b:20,
    c:{
    a:10
    }
    };
    var obj2 = JSON.parse(JSON.stringify(obj));
    console.log(obj2);
    obj2.c.a=20;
    alert(obj.c.a);//10
    • jsonObj 就是 json 格式的对象字符串

    • jsonArr 就是 json 格式的数组字符串

使用场景:

1,对象的深克隆

2,缓存的存储

3,前后台数据传输解析

this 关键字 主要用于函数中 不同的场景下 指向不同

            //普通函数  window

function fn(){
console.log(this);
}
fn(); //window

//事件函数 指向事件源
var btn = document.querySelector('button');
btn.onclick = function(){
console.log(this);//button 事件源
}
//定时器 中也是window
setInterval(function(){
console.log(this); //window
},1000);

//预保留this
//事件函数中嵌套了内层函数,需要在内层函数中使用this得到事件源(this指向window)
var btn = document.querySelector('button');
btn.onclick = function(){
var _this = this;
setInterval(function(){
console.log(_this);
},1000);
}
//this在对象的方法中,指向 调用这个方法的对象
var obj ={
name:"小明",
act:function(){
console.log(this.name);
},
c:{
name:"小红",
b:function(){
console.log(this.name);
}
}
}
obj.act();
obj.c.b();

call() apply() bind() 可以改变this在函数中的指向

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<script>

function fn(){
console.log(this);
console.log( arguments );
}
// fn.call();
// fn.call(2);
fn.call(2,3,4,5,6);

/*
call
1,没有参数fn.call() 就相当于函数调用
2,有参数
第一个参数,就是这个函数调用时的this指向,从第二个参数开始,会当做实参传入
* */
function fn(){
console.log(this);
console.log( arguments );
}
// fn.apply();
// fn.apply(2);
fn.apply(2,[3,4,5,6]);
/*
apply
没有参数:fn.apply() 相当于函数调用
有参数
第一个参数是函数调用时的this指向,只有两个参数,第二个参数,必须是数组,会将数组解析出来,数组的每个元素都会当成一个实参传入
* */
</script>

</body>
</html>

bind方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function fn(){
console.log(this);
}
var fn2 = fn.bind(2);
fn2();
/*
bind调用,返回一个函数副本,这个函数副本中的this指向,指向了bind调用时穿的参数
* */
</script>
</body>
</html>

 

原文地址:https://www.cnblogs.com/cxf1214/p/11437434.html