ECMAScript-13 【对象遍历属性-this-caller_callee】

一.对象遍历属性

(1).链式操作

var sched={
    wakeup:function(){
        console.log('a');
        return this;
    },
    wakeupa:function(){
        console.log('za');
        return this;
    },
    wakeupb:function(){
        console.log('zza');
        return this;
    }
    
}
sched.wakeup().wakeupa().wakeupb()

return this把sched return出去所以可以继续往下点，这叫链式操作

(2).中括号访问属性、

var myLang={
    No1:'HTML',
    No2:'CSS',
    No3:'JavaScript',
    myStudyingLang:function(num){
        console(this['No'+num])
    }
}
myLang.myStudyingLang(2);

 像这种需要运算的就必须加入[]

(3).'.'属性原理

obj.name ->obj['name']

js引擎会隐式转化为中括号

V8不一定

(4).枚举

js中枚举与遍历是相辅相成的

(5).for-in

可以遍历对象和数组

var car={
    brand:'Beanz',
    color:'red',
    lang:'5'
}
for(var key in car){
    //console.log(car.key)访问不到
   console.log(car[key])//这样可以
}

car.key 是访问不到的，因为Js会转换中括号访问方式就会变成car[‘key’]

(6).for-in(原型）

凡是原型链上的属性都会打印

function Car(){
    this.brand='Benz';
    this.color='red';
    this.displacement='3.0';
}
Car.prototype={
    lang:5,
    width:2.5
}
Object.prototype.name='Object';
var car=new Car();
for(var key in car){
    console.log(key:+'-'+car[key]);
}

输出结果:

(7).hasOwnProperty

可以排除原型链上非自身的属性，是自身属性才返回true

var obj={
    name:'爱笑也',
    age:18
}
function Car(){
    this.brand='Benz';
    this.color='red';
}
Car.prototype={
    lang:5
}
Object.prototype.name='Object';
var car=new Car();
for(var key in car){
    if(car.hasOwnProperty(key)){
        console.log(car[key]);
    }
}

结果:

(8).in

判断属性值是否存在，
var car={
    brand:'Benz',
    color:'red'
}
console.log('displacement' in car)//返回false

in是不排除原型属性的
function Car(){
    brand='Benz',
    color='red'
}
Car.prototype={
    displacement:'3.0'
}
var car=new Car();
console.log('displacement' in car)//返回true

(8).instanceof()

instanceof 判断这个实例化对象是否为指定构造函数构建的

A对象的原型里到底有没有B的原型

function Car(){}
var car =new Car();
console.log(car instanceof Car)//返回true

(9).instanceof()原型链

原型链上有重合的都为true

console.log(car instanceof Object);//true
console.log([] instanceof Array);//true
console.log([] instanceof Object);//true
console.log({} instanceof Object);//true;

(10).综合实例

判断a的类型

var a=[];
console.log(a.constructor);//f Array(){[native code]}
console.log(a instanceof Array);//true
var str=Object.prototype.toString.call(a);//[object Array]
if(str==='[object Array]'){
    console.log('是数组');
}else{
    consloe.log('不是')
}
//第三种方法更改了this的指向，相当于是a调用了Object的ToString

二.this

(1).函数的this指向原理

function test(b){
    this.d=3;//window.d=3
    var a=1;
    function c(){}
}
test(123);
console.log(this.d)
GO:{
    test=function
}
AO:{
    b:123
    arguments:123
    a:1
    c:function
    this:window
}

(2).构造函数的this指向原理

function Test(){
    //当new的时候系统会隐式创建this
    //var this={
   //     _prototype_:Test.prototype
  // }
    this.name='123';
}
var test=new Test();
GO:{
    Test:function
    test:{
        name:123
     _prototype_:Test.prototype
    }
}
AO{
     name:123
     _prototype_:Test.prototype
}

(3).总结

1. 全局this->window
2. 预编译函数this->window
3. apply/call改变this指向
4. 构造函数的this指向实例化对象
5. 对象的this指向对象自己

 三.caller_callee

(1).callee(与arguments配合使用)

返回实参列表所使用的函数

function test(a,b,c){
    console.log(arguments.callee.length);//3
    console.log(test.length);//3
    console.log(arguments.length);//2
}
test(1,2);

.length是形参长度

arguments是实参长度

.callee是形参

callee在那个函数中就返回那个函数体

function test1(){
    console.log(arguments.callee);
    function test2(){
        console.log(arguments.callee)
    }
    test2();
}
test1();

结果:

(2).用途

模块化递归

function sum(n){
    if(n<=1){
        return 1;
    }
    return n+sum(n-1);
}
var sum=(function (n){
    if(n<=1){
        return 1;
    }
    return n+arguments.callee(n-1);
})(100);

(3).caller()

caller返回当前被调用函数的函数引用

test1();
function test1(){
    test2();
}
function test2(){
    console.log(test2.caller)
}

结果:

严格模式下报错