JS对象、原型 | TK-Person

文章目录

1. 对象：
2. JS原型
3. prototype 原型当前函数的原型
1. 3.1. 原型链

太难理解了！！！！！

对象：

案例：var obj = {}; //对象

var arr = [ ];//数组
var isNone = null;//空
var fn = function(){ //函数表达式
    return 10;
};

对象是属性的集合,类比数组进行记忆，区别:对象给数组中的元素再取名字,对象没有length

var arr = [1,’123’,function(){},false];//数组
console.log(arr[2]);//取值

var obj = {            //对象
    'num':1,
    'str':'123',
    'fn':function(){
    return'早上好';
},
    'on':false
}
console.log(obj.num);

读取当前对象的属性 . 和 [ ‘ ’ ]

var link = document.querySelectorAll('a');
var text = document.querySelectorAll('input');

console.log(link[0]['title']) //html元素

link[0].style.borderTop = '1px red solid';
link[0].style['border-top'] = '1px red solid';

function change(ele,样式名称,样式值){

    var ele =document.querySelector(ele);
    ele.style[样式名称] =  样式值;
}

change('#box','border-top','1px red solid’);

for in 遍历对象属性语句，枚举语句；查看对像所具有的全部属性；对象循环用for in

for in 不要对数组循环，why?因为for in的顺序不是固定的

for(var i in obj){
    console.log(i);
    document.write(‘属性名：’+i+'属性值：'+obj[i]
    +'<br/>');//可以在HTML里面显示
}

//obj被所查寻对象替代

JS原型

instanceof 判断数据类型针对Function ,Object ,Array ,new Number() ,new String(), new Boolean()

数组和对象的关系？
数组是对象的子集，对象包含数组。

var fn3 = function(){
var a =10;
var b = 20;
}
var arr =[‘123’，2，3，4];
原理var obj = new Object();

console.log(arr instanceof Object);

函数和对象的关系？
函数不是对象，对象都是函数。
鸡与蛋的关系。

var fn2 = function(){
var a =10;
var b=20;
return a+b;
}
原理var str = new String(‘123’);
原理var num = new Number(123);

console.log(typeof fn2);
console.log(str instanceof String)

prototype 原型当前函数的原型

proto指向创建当前对象的函数的prototype,它前面有两个下划线后面有两个下划线。
所有的函数都有prototype属性，该属性是一个对象。
所有的对象都有一个proto属性,该属性前面有两个下划线后面有两个下划线
，该属性也是一个对象。

假如这个函数没有任何属性的话，prototype对象默认有个constructor属性。

事例：function fn(){
    fn.prototype.name = ‘liuhai’;
    fn.prototype.age =28;
    fn.prototype.sex =‘boy’;
    console.log(fn.prototype);
}

fn();

function fn(){
    // console.log(fn.prototype.constructor);
    fn.prototype.name = 'haoren';
    fn.prototype.age = 4;
    fn.prototype.star = function(){
        console.log('123');
        //this.name='奥特曼'；
    }
}
var fn2 = new fn();//fn2为子类，继承父类fn的一些属
性
console.log(fn2);

从fn方法里面new出一个实例
生成对象

值类型：可以直接引用

var str = ‘123’;
var num = 123;
var isReady = true;

引用类型：不可以直接引用
```
var arr = [0,1,2];
```

简化：var arr2 =[1,2,3,4];

  原理：var arr2 = new Array();
arr2[0]=1;
arr2[1]=2;
arr2[2]=3;
arr2[3]=4;
console.log(Arrgy.prototype);

原型链

在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型的值可以是一个对象,也可以是null.如果它的值是一个对象,则这个对象也一定有自己的原型.这样就形成了一条线性的链,我们称之为原型链.
```
事例：var fn = function(){};
var obj = new fn();
fn.prototype.age=10;
fn.prototype.sex='boy';
fn,prototype.a=30;
obj.__proto__.a =‘好好’;//这句话是在函数里面添加新的
内容，如过原内容里面有a，它会替代原有内容

console.log(fn.prototype);
```
hasOwnproperty 查看私有属性
```
案例：hasOwnproperty("")
```

1、在全局作用域下面调用this，this指向global，也就是window。
函数声明匿名函数函数表达式在全局中调用 this指向window。

* 事例：(function(){
      console.log(this);
      this.x=10;
      this.y=20;
      })()
      console.log(this);

     function add(){
      console.log(this);
      this.x=10;
      this.y=20;
      return this.x+this.y;
      }
      add();
      var fn=new add();
      console.log(this);

      var obj=function(){
      console.log(this);
      this.x=10;
      this.y=20;
      }
      obj();
      console.log(this);

2、 new关键词构造的对象，this指向创建该对象的函数。

* 事例：var obj=function(){
        console.log(this);
        this.x=10;
        this.y=20;
        }
        var ne= new obj;

3、 this当前的函数为对象属性的时候，this指向该对象。

* 事例：var obj = {
         x:10,
         y:20,
        fn1:function(){
        this.x=20;
           }
        }
        obj.fn1();
        congsole.log(obj.x);

对象：

JS原型

prototype 原型 当前函数的原型

原型链

prototype 原型当前函数的原型