1.js组成

js2-高级-对象

2.值类型和引用类型

js2-高级-对象

  • js2-高级-对象
    在栈里面存的是地址(或者说 引用)
  • 参数传递时:值传递的是值 引用传递的是地址/引用
    -js2-高级-对象

3.创建对象的三种方式

方式二、三 不能看出其原型。
js2-高级-对象

1.工厂模式 自定义构造函数方式(√)

js2-高级-对象

2.字面定义

js2-高级-对象

3.调度系统的构造函数

js2-高级-对象

4.构造函数与实例对象 原型对象

构造函数里面有个原型,原型里面的constructor指向构造函数

  • 三者关系:
    js2-高级-对象
    在原型中,
    有propotype 就是构造函数,没有就是实例js2-高级-对象
    js2-高级-对象
    js2-高级-对象
  • 创建方式:构造函数与在原型添加方法 实例 的方式:
    js2-高级-对象
    js2-高级-对象
    js2-高级-对象
  • this指向问题
    构造函数 原型对象的this指向实例
    js2-高级-对象
    js2-高级-对象
    js2-高级-对象
    js2-高级-对象

原型:想要实现数据共享,就写到原型里面。

好处:数据共享,节省内存空间。
js2-高级-对象
js2-高级-对象
js2-高级-对象

而如果用上面 创建对象的三种方式 在实例创建两个实例,并调用函数时,所用的方法都不是同一个。而是两个不同的方法。实质是开辟了两个内存空间存放eat方法
js2-高级-对象
例如:
js2-高级-对象
js2-高级-对象

原型链

js2-高级-对象
js2-高级-对象

原型链的改变

js2-高级-对象

5.闭包与匿名函数

匿名函数

顾名思义就是没有名字的函数。立即执行。

// 这么写会报错,因为这是一个函数定义:
function() {}()
 
// 常见的(多了一对括号),调用匿名函数:
(function() {})()
 
// 但在前面加上一个布尔运算符(只多了一个感叹号),就是表达式了,将执行后面的代码,也就合法实现调用
!function() {}()

两种写法:

        var aa = function(x){
            alert(x);
        }(5);//5

js2-高级-对象

(function(x){alert(x);})(5);//5

js2-高级-对象

闭包

js2-高级-对象
js2-高级-对象
f1() 输出10
js2-高级-对象
输出 10

js2-高级-对象
输出 10
js2-高级-对象

闭包+匿名函数

但上面:如果要实现:以下功能
js2-高级-对象
普通闭包实现不了:
js2-高级-对象
js2-高级-对象

正确的打开方式:
js2-高级-对象
js2-高级-对象
ff此时是个函数

可以利用自执行函数和闭包来保存某个特殊状态中的值

promise

promise + http请求:

            let myFirstPromise = new Promise((resolve, reject) => {
                    $.post('https://cloudapi.usr.cn/usrCloud/dev/getDevs',
                        JSON.stringify(param),
                        function (result) {
                            resolve(result)
                        },
                    );
            })
            myFirstPromise
            .then((result)=>{
                console.log("hahaaaaa1")
                return myFirstPromise()   
                //注意一定要return,否则没有返回值,无法链式迭代后面的than
            })
            .catch((result)=>{
                console.log("hahaaaaa2")
                return myFirstPromise()
            })
            .then((result)=>{
                console.log("hahaaaaa1")
                return myFirstPromise()
            })

不管Promise实现怎么复杂,但是它的用法却很简单,组织的代码很清晰,从此不用再受callback的折磨了。promise作为一个新的API,它的API本身没有什么特别的功能,但是它背后代表的编程思路是很有价值的。

最后,Promise是如此的优雅!但Promise也只是解决了回调的深层嵌套的问题,真正简化JavaScript异步编程的还是Generator,在Node.js端,建议考虑Generator。

apply call 方法

js2-高级-对象js2-高级-对象

浅拷贝与深拷贝

参考:https://blog.csdn.net/qq_39207948/article/details/81067482

  • 定义:
    1.浅拷贝: 将原对象或原数组的引用直接赋给新对象,新数组,新对象/数组只是原对象的一个引用
    2.深拷贝: 创建一个新的对象和数组,将原对象的各项属性的“值”(数组的所有元素)拷贝过来,是“值”而不是“引用”。在改变新的数组(对象)的时候,不改变原数组(对象)

深拷贝方法–数组

  • concat()
    var array = [1, 2, 3, 4]; var copyArray = array.concat(); copyArray[0] = 100; console.log(array); // [1, 2, 3, 4] console.log(copyArray); // [100, 2, 3, 4]
  • slice()
    var array = [1, 2, 3, 4]; var copyArray = array.slice(); copyArray[0] = 100; console.log(array); // [1, 2, 3, 4] console.log(copyArray); // [100, 2, 3, 4]

slice() 方法返回一个从已有的数组中截取一部分元素片段组成的新数组(不改变原来的数组!)

用法:array.slice(start,end) start表示是起始元素的下标, end表示的是终止元素的下标
当slice()不带任何参数的时候,默认返回一个长度和原数组相同的新数组

[arr.splice(1,2):删除arr下标1的位置,并且返回删除的数组]
js2-高级-对象

  • 直接遍历 push

深拷贝方法–对象

  • 直接遍历
  • ES6的Object.assign
var obj = {
  name: '彭湖湾',
  job: '学生'
}
var copyObj = Object.assign({}, obj);
copyObj.name = '我才不叫彭湖湾呢! 哼  (。・`ω´・)';
console.log(obj);   // {name: "彭湖湾", job: "学生"}
console.log(copyObj);  // {name: "我才不叫彭湖湾呢! 哼  (。・`ω´・)", job: "学生"}

Object.assign:用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target),并返回合并后的target
js2-高级-对象

下面这一招可谓是“一招鲜,吃遍天”
JSON.parse(JSON.stringify(XXXX))

var array = [
    { number: 1 },
    { number: 2 },
    { number: 3 }
];
var copyArray = JSON.parse(JSON.stringify(array))
copyArray[0].number = 100;
console.log(array); //  [{number: 1}, { number: 2 }, { number: 3 }]
console.log(copyArray); // [{number: 100}, { number: 2 }, { number: 3 }]

相关文章: