js高级之对象的基本知识

对象是什么？

对象是一种特殊的数据结构，是对事物特征特和行为的抽象，包括属性和方法

创建对象的方式

1、基本方法创建

var stu={

           name:'zs',

           age:20,

           score:{

              math:90,

              chinese:80

           },

           hobby:['singe','dance'],

           eat:function(){

              console.log(this.name+'eat apple~')

           }

       }

console.log(stu.name+' '+stu.age+' '+stu.score.chinese);

stu.eat();

 

2、工厂方法  

  var Product=function(title,price){ //函数首字母大写

           return{

              title:title,

              price:price,

              buy:function(){

                  console.log('买了'+this.title);

              }

           }

       }

       var pro1=new Product('电脑',5000);

       var pro2=new Product('手机',1800);

       pro1.buy();

       pro2.buy();

       // 此时内存地址不相等，结果为false

       console.log(pro1.buy==pro2.buy);

3、构造函数方式 

​
      function Person(name,sex){

           this.name=name;

           this.sex=sex;

           this.eat=function(){

              console.log(this.name+'吃了');

           };

       }

       /*

       实例化对象步骤

       （1）创建空对象

       （2）this指向的是当前的实例化对象

       （3）执行构造函数代码

        */

       var person1=new Person('Li','男');

       var person2=new Person('Hu','女');

       person1.eat();

       person2.eat();

       // 此时内存地址不相等，结果为false

       console.log(person1.eat==person2.eat);

​

 

4、构造函数+原型方式（通常使用）

       function Car(name,price){

           this.name=name;

           this.price=price;

       }

       Car.prototype.drive=function(){

           console.log(this.name+'可以每天开10公里');

       }

       var car1=new Car('碰碰车',1000);

       var car2=new Car('单车',500);

       // 此时内存地址相等，结果为true

       console.log(car1.drive==car2.drive);

 

对象的基本知识点        

1、什么是原型（prototype）

每一个构造函数，都有一个prototype属性，这个属性是一个指针，指向一个对象，这个对象的用途可以包含由构造函数而创建的那个对象实例的原型对象。prototype就是通过调用构造函数而创建的那个对象实例的原型对象。该对象的属性和方法都能够被构造函数的实例继承。

 

ps：构造函数的方法一般放进原型里，他们内存地址一样，有利于节约内存空间。

 

2、原型链？

原型链：当从一个对象那里调取属性或者方法时，如果该对象自身不存在这样的属性或方法，就会去自己关联的prototype对象那里寻找，如果property没有，就回去prototype关联的前辈prototype那里寻找，如果再没有则继续查找prototype.prototype引用的对象，以此类推，直到prototype.···.prototype为undefined，从而形成了所谓的原型链。

 

Object是顶层对象，所以对象都继承自他

Object的prototype就是undefined

 

3、判断 实例对象a 是否是 构造函数b 的实例化对象

（1）a.constructor==b 不推荐使用，重写prototype中方法时可能会丢失constructor属性

（2）a instanceof b 推荐使用

       console.log(car1.constructor==Car);

       console.log(car1 instanceof Car);

 

4、重写原型中的方法的两种方式

（1）构造函数名.prototype.方法名=function(){}

此时相当于在原型中改写了drive方法，新增了buy方法，constructoe属性也还在

       Car.prototype.drive=function(){

           console.log('重写的drive方法1');

       }

       Car.prototype.buy=function(){

           console.log('购买了'+this.name);

       }

       console.log(Car.prototype);

       console.log(Car.prototype.constructor);

       var car3=new Car('奔驰',100000);

       car3.drive();

 

（2）构造函数名.prototype={

                             函数名:function(){},

                             函数名:function(){}

}

此时相当于给prototype对象重新赋值，相当于里面所有的东西都被清掉了，constructor属性丢失

Car.prototype={

           // constructor:Car, //此时可加上constructor属性

           drive:function(){

              console.log('重写的drive方法2');

           },

           buy:function(){

              console.log('重写的buy方法2');

           }

       }

       console.log(Car.prototype);

       console.log(Car.prototype.constructor);

       var car3=new Car('奔驰',100000);

       car3.drive();

       car3.buy();

      

5、判断 属性b 是 对象a 的自有属性还是继承属性 a.hasOwnProperty('b')

       var car4=new Car('宝马',200000);

       car4.look=function(){

           console.log('look是我自己的方法');

       }

       // 相当于给car4对象新增了dirve方法，此时对象中有了dirve方法，就不会到prototype中继承drive方法了

       car4.drive=function(){

           console.log('drive是我自己的方法');

       }

       console.log(car4.hasOwnProperty('look'));

       car4.drive();

       console.log(car4.hasOwnProperty('drive'));

 

6、prototype与__proto__的关系,实例对象constructor（实例对象继承了prototype的constructor）与构造函数的关系（两条下划线）

实例对象的__proto__指向构造函数的prototype, 实例对象的constructor则指向构造函数

       console.log(Car.prototype==car4.__proto__);

       console.log(car4.constructor==Car);

 

7、判断 a对象的prototype对象 是否存在于 另一个对象b 的原型链中a.prototype.isPrototypeOf(b)

         console.log(Car.prototype.isPrototypeOf(car4));

         console.log(Object.prototype.isPrototypeOf(car1));

 

 

8、this的指向问题

（1）普通函数：this指向window

（2）事件函数：this指向事件源

（3）构造函数：this指向实例化对象

（4）基本对象：this指向当前对象

        function a(){

           console.log(this);

        }

        a();



        btn.onclick=function(){

           console.log(this);

        }



        function C(name){

           this.name=name;

        }

        var c=new C('小明');

        

        c.printName=function(){

           console.log(this.name);

        };

        c.printName();



        console.log(car3.constructor==Car);

最后是自己简单画的构造函数、实例化对象、prototype对象和Object的关系图