标签：function Object obj name 对象 回想 原型 一些

想点什么些什么

CSS篇

line-height：2 与line-height：200% 区别

line-height:2 单行文本是自身高度的两倍行高
ling-height：200 单行文本是系统默认字体的200%

继承性
父元素设置line-height：2，父元素的子元素会继承它，子元素的行高是自身高度的两倍。所以父元素跟子元素行高不相同
父元素设置line-height：200%，同样会继承，但是系统默认字体是固定的，所以父元素、子元素的行高是一样的

JS篇

箭头函数 this 的 指向

创建时的this，不是调用时的

闭包

一个函数可以访问内部函数变量

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}
var add5 = makeAdder(5);
console.log(add5(2));  // 7

解构赋值

var a, b; 
var c = ['啊', '吧' , '哈']
var [a, ...b] = c
console.log(a, b) // 啊, ['吧', '哈']

 var C = {obj:'123', obj1:'321'}
 var {obj, obj1} = C
 console.log(obj,obj1) // 123 321

对象 for in 循环

var obj = {
    a1:'我是第一个',
    a2:'我是第er个',
    a3:'我是第三个',
}

for(item in obj){ // item就是每一项
    console.log(item, obj[item]) // a1 我是第一个 ...
}

手写一个new()

function mynew() {
    var constr = Array.prototype.shift.call(arguments)
    var obj = Object.create(constr.prototype)
    var result = constr.apply(obj,arguments)
    return result instanceof Object ? result : obj 
}
 function Person(name, age) {
     this.name = name
     this.age = age
 }
 const person1 = new Person('new啦啦', 18)
 const person2 = mynew(Person, '自定义new啦啦', 17)
 console.log(person1, person2)

手写promise

function myPromise(constructor){
    let self=this;
    self.status="pending" //定义状态改变前的初始状态
    self.value=undefined;//定义状态为resolved的时候的状态
    self.reason=undefined;//定义状态为rejected的时候的状态
    function resolve(value){
        //两个==="pending"，保证了状态的改变是不可逆的
       if(self.status==="pending"){
          self.value=value;
          self.status="resolved";
       }
    }
    function reject(reason){
        //两个==="pending"，保证了状态的改变是不可逆的
       if(self.status==="pending"){
          self.reason=reason;
          self.status="rejected";
       }
    }
    //捕获构造异常
    try{
       constructor(resolve,reject);
    }catch(e){
       reject(e);
    }
}
    同时，需要在myPromise的原型上定义链式调用的then方法：
myPromise.prototype.then=function(onFullfilled,onRejected){
   let self=this;
   switch(self.status){
      case "resolved":
        onFullfilled(self.value);
        break;
      case "rejected":
        onRejected(self.reason);
        break;
      default:       
   }
}

测试

var p=new myPromise(function(resolve,reject){resolve(1)});
p.then(function(x){console.log(x)})
//输出1

深拷贝（是拷贝对象各个层级的属性）

简洁深拷贝：JSON.parse(JSON.stringify())

递归深拷贝:

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象，如果是，递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    

对象深拷贝注意

使用JSON.parse() JSOM.stringify()的时候当值为undefined、function、symbol 会在转换过程中被忽略

对象Objet.assign() // 浅拷贝！！！

Object.assign({},sources)方法只会拷贝源对象自身的并且可枚举的属性到目标对象（如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性）。
Object.assign({}, …sources){}定义一个空对象 / Object.assign(target, …sources)也可目标对象,sources源对象（要合并的对象，可多个)

数组深拷贝注意

let [… arr2] = arr // …展开运算符 (数组包含对象||数组时就会失效，是没有把数组里面的对象深拷贝，而是浅拷贝)

let arr2 = arr.concat() // concat(array) 连接两个或多个数组返回新数组 (数组包含对象||数组时就会失效，是没有把数组里面的对象深拷贝，而是浅拷贝)

let arr2 = arr.slice(0) // slice(start,end) 从已有数组选定返回 (数组包含对象||数组时就会失效，是没有把数组里面的对象深拷贝，而是浅拷贝)

原型/原型链

原型

每个函数都有prototype属性（显式原型），这个属性指向函数的原型对象
每个对象（除了null）都有__proto__ 属性（隐式原型），指向该原型
每个原型都有constructor属性，指向该关联的构造函数

对象的原型只是一个引用，指向另一个对象。对象原型之间的嵌套组成了原型链，原型链的做用是维护访问对象属性的查询，肯定访问权限

原型链

拿对象的一个属性，但对象本身没有这个属性，就会去__proto__构造函数的对象中去寻找，如原型也没有就会一直__proto__往原型得原型上找，直到对象的原型对象是null结束寻找。形成链式解构 (原型链)

function Person() {
    this.name ='飒飒';
    this.age = 18
  }
let newperson = new Person()

Person.prototype.sex = '我是男女！'
Person.prototype.age = 87

console.log(newperson.age) // 18
console.log(newperson.sex) // 我是男女，对象本身没有这个属性，__proto__去原型上找，原型没有返回undefined
console.log(Person.prototype) {sex: "你猜猜，我是男女！", age: 87, constructor: ƒ}

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__

Object.create() 与 Object.setPrototypeOf() 都是设置一个对象的原型对象
区别 在进行俩个原型之间的委托时使用setPrototype更好，Object.create更适和直接对一个无原生原型的对象快速进行委托
Object.create() 凸显重新赋值， obj——> new prototype (直接赋值了新的原型)
Object.setPrototypeOf() obj——> old prototype(本身原来的原型) ——>new prototype

Object.defineProperty()

备注：应当直接在 Object 构造器对象上调用此方法，而不是在任意一个 Object 类型的实例上调用。

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象

Object.defineProperty(obj, prop, descriptor) obj/目标对象 prop/要定义或修改的属性名 descriptor/要定义或修改的属性描述符，返回值：被传递给函数的对象。

let data = {}
let name = '三角龙'
Object.defineProperty(data,'name',{
    get:function(){
        return name
    },
    set:function(newvalue){ // 这里可以的到值得修改
        if( name !== newvalue){
            name = newvalue
        }
        return name
    }
})

Proxy 代理拦截

vat proxy = new Proxy(target, handler)

用es6提供构造函数，生成proxy实例  target表示要拦截的目标对象, handler 参数也是对象，用来你制定的拦截行为（就是你拦截那个对象要干嘛）

    let son = {
        name: '小子',
        age: 16,
        sex: '男'
    }
    let proxy = new Proxy( son, {
        get(target, key) {
            return target[key] 
        },
        <!-- set接受四个参数，1、Target用于接收属性的对象 2、key 要写入的“属性键”（我称为值得名字，可字符串或symbol）3、value 被写入的“属性值”（我称为写入的值）4、receiver：操作发生的对象（通常是代理）-->
        set(target, key, value) {
            // if(key === 'age' && typeof value !=='number') { //这里拦截了age不是number
            //     throw Error('年龄必须事number!')
            // }
            if(key === 'name' && value !=='小子') { //拦截不叫小子的
                console.log('必须叫小子（proxy拦截）')
                throw Error('必须叫小子')
            }
            return Reflect.set(target, key, value);
        }
    })
    proxy.name = '假小子' // 这里就会触发代理拦截set里面我们自己定义判断的语句

    let son = {
        name:'小子',
        age:26,
        sex:'男',
        desc:'这个是老子（grandson他爸爸）'
    }
    // 定义拦截行为
    let validator {
        get: function(obj,key){
            return obj[key]
        }
        set: function(obj,name,value){
            if(name === 'age' && value < 5) {
                console.log('这小屁孩五岁都没有，拦他！！！（proxy拦截）')
                throw Error('必须>五岁再说')
            }
            obj[name] = value
            // 这里还可以赋值给别的对象（给son的对应值进行修改或赋值）
            son[name] = value
        }
    }
    // 定义proxy
    let grandson = new Proxy({}, validator)
    grandson.name = 'son的儿子'
    grandson.age = 2 // 触发set定义的判断

vuex(五个属性)

state moutations actions getters modules

state： 存放值的
getters： 是store的计算属性
moutations： 同步操作,直接修改state的值 
    SET_TOKEN: (state, token) => {
        state.token = token
      },
actions： 异步操作，通过commit用moutations的方法去修改state的值
    commit('SET_TOKEN', res)
modules： 模块化，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

页面使用actions的方法修改state的值：this.$store.dispatch(‘某个模块/方法名’，传参)

页面使用moutations的方法修改state的值：this.$store.commit(“doLogout”);

vue的computed计算属性和wacth侦听器

watch顾名思义，用于监听数据变化，其中可以监听的数据来源有三部分：props、data、computed内的数据；watch提供两个参数（newValue，oldValue），第一个参数是新值，第二个参数旧值；（每次都会触发监听，不会有缓存）

computed用于处理复杂的逻辑运算，主要和methods储存方法来进行区分；methods储存方法，computed储存需要处理的数据值；methods每次都会调用，computed有缓存机制，只有改变时才执行，性能更佳（有缓存，默认去get，有变化才会触发set）；

    watch: {
        // wacthvalue这个在data中有定义,有变化就可以监听到做自己想要的处理
       wacthvalue(newvalue,oldvalue){
           console.log(newid,'东西',oldid)
            // 代表在wacth里声明了firstName这个方法之后立即执行handler方法
            immediate: true
       }
     }

  computed:{
      //computedMsg这个没有在data数据中没有定义的，页面直接this.computedMsg使用
    computedMsg:{
        get() { // 来取这里的值，赋值给computedMsg
           return '我是data其他值来赋值或计算给computedMsg' // 可直接返回值
           return this.xx + this.yy //也可以data里面的数据，这里xx，yy 有变化会触发
        },
        set(val) { // computedMsg值变化，这里就触发
          console.log(val,'变化liao')
        }
    }
  }

标签：function,Object,obj,name,对象,回想,原型,一些
来源： https://blog.csdn.net/weixin_44644144/article/details/120222172

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。