javascript 原型、this、闭包、深拷贝

栏目: JavaScript · 发布时间: 5年前

内容简介:Function.prototype.apply(),Function.prototype.call(),Function.prototype.bind()
  • JavaScript只有一种结构:对象。
  • 每个实例对象(object)都有一个私有属性(称之为__proto__)指向它的原型对象(prototype),层层向上直到一个对象的原型对象为 null , f ---> Function.prototype ---> Object.prototype ---> null
    • Object.getPrototypeOf() 方法返回指定对象的原型
      const prototype1 = {};
          const object1 = Object.create(prototype1);
          console.log(Object.getPrototypeOf(object1) === prototype1);//true
          Object.prototype===Object.getPrototype(prototype1)  // true
      复制代码
    • Object.setPrototypeOf(obj,prototype) 方法设置一个指定的对象原型
    • obj.hasOwnProperty(prop) 方法返回一个布尔值,指定对象自身属性中是否具有指定的属性,不会遍历整个原型链

this

  • this 箭头函数其实是没有 this 的,这个函数中的 this 只取决于他外面的第一个不是箭头函数的函数的 this
function a(){
        return ()=>{
            return ()=>{
                console.log(this)
            }
        }
    }
    console.log(a()()())//window
复制代码

闭包

for ( var i=1; i<=5; i++) {
	setTimeout( function timer() {
		console.log( i );
	}, i*1000 );
}
//输出5个6,首先因为`setTime`是个异步函数,所有会先把循环全部执行完毕,这时i等于6,
for ( let i=1; i<=5; i++) {
	setTimeout( function timer() {
		console.log( i );
	}, i*1000 );
}
{ // 形成块级作用域
  let i = 0
  {
    let ii = i
    setTimeout( function timer() {
        console.log( i );
    }, i*1000 );
  }
  i++
  {
    let ii = i
  }
  i++
  {
    let ii = i
  }
}
复制代码

深拷贝

  • JSON.parse()和JSON.stringify() 能正确处理的对象只有Number、String、Arry等能够被json表示的数据结构
function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {        
    var prop = initalObj[i];        // 避免相互引用对象导致死循环,如initalObj.a = initalObj的情况
    if(prop === obj) {            
      continue;
    }        
    if (typeof prop === 'object') {
      obj[i] = (prop.constructor === Array) ? [] : {};            
    deepClone(prop,obj[i]);
    } else {
      obj[i] = prop;
    }
  }    
  return obj;
}
复制代码

call、apply、bind区别

Function.prototype.apply(),Function.prototype.call(),Function.prototype.bind()

  • callapply 都是为了解决改变 this 的指向。 作用相同,只是传参方式不同--第一个参数:作用域,第二个参数, call 可以接收一个参数列表, apply 只接受一个参数数组
  • bind() 方法创建一个新的函数,在调用时设置 this 关键字为提供的值
    bind() 是用来控制调用函数的范围(全局、某个类等等),在是 bind(arg1) 这个函数被调用时,arg1 是调用 bind() 函数里面的 this,不管这个函数被调用多少次,这个函数里的 this 一直是这个 arg1
    复制代码
    //mdn例子
    this.x = 9;
    var module = {
        x: 81,
        getX: function() { return this.x; }
    };
    
    module.getX(); // 81
    
    var retrieveX = module.getX;
    retrieveX();  // 9
    
    var boundGetX = retrieveX.bind(module);
    boundGetX(); // 81
    复制代码

以上所述就是小编给大家介绍的《javascript 原型、this、闭包、深拷贝》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

设计模式解析

设计模式解析

Alan Shalloway、James R.Trott / 徐言声 / 人民邮电出版社 / 2013-1 / 55.00元

《设计模式解析(第2版·修订版)》,本书首先概述了模式的基础知识,以及面向对象分析和设计在当代软件开发中的重要性,随后使用易懂的示例代码阐明了12个最常用的模式,使读者能够理解模式背后的基本原则和动机,理解为什么它们会这样运作。一起来看看 《设计模式解析》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

在线进制转换器
在线进制转换器

各进制数互转换器

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具