js对象与对象原型

时间 2020-01-27

原文原文链接

一.js对象的建立

1.字面量方式建立

若是要建立大量的实例对象,代码重复,冗余

var p1={
    name:"gene",
    age:20,
    sayhi:function(){
        console.log('hello world')
    }
}
console.log(p1)
复制代码

2.调用系统构造函数建立

全部的实例对象均可以调用系统构造函数来建立,那么小狗和人是来自同一个父类吗
若是要建立大量的实例对象,代码重复,冗余

var p=new Object();
    p.name="gene";
    p.age=20;
    p.sayhi=function(){
    console.log('hello world')
}
console.log(p);
复制代码

3.工厂模式建立

函数名是小写
有new
有返回值
new以后的对象是当前的对象
直接调用函数就能够建立实例对象
工厂模式建立解决了建立大量实例对象出现代码冗余的问题
并无解决小狗和人是来自同一个父类的尴尬问题

function createObject(name,age){
    var obj=new Object();
    obj.name=name;
    obj.age=age;
    obj.sayhi=function(){
    	console.log('hello world')
    }
    return obj;
}
var p=createObject('gene',20);
console.log(p);
复制代码

4.自定义构造函数

函数名首字母要大写
没有new
没有返回值
this是当前对象
经过new的方式来建立实例对象

function Person(name,age){
    this.name=name;
    this.age=age;
    this.sex='男';
    this.sayhi=function(){
    	console.log('hello world')
    }
}
var p= new Person('gene',20);
console.log(p);
复制代码

二.new操做符具体干了什么

1.在内存中建立一个空的对象javascript

2.让this指向这个空的对象,并继承该对象原型html

3.调用构造函数,目的是给对象属性和方法java

4.返回一个对象程序员

三.构造函数与实例对象的关系

function Person(name,age){
    this.name=name;
    this.age=age;
    this.sex='男';
    this.sayhi=function(){
    	console.log('hello world')
    }
}
var p= new Person('gene',20);
console.dir(p);
console.dir(Person);
复制代码

实例对象是经过构造函数来建立的,建立的过程叫实例化浏览器

这只是表面的理解,下面咱们从更深一层来理解函数

1.`proto`

实例对象p有个属性__proto__,称之为原型,这既是一个属性也是一个对象,这个属性是给浏览器使用,不是标准的属性,它的下面还有一个属性constructor,称之为构造器,constructor的值指向生成该对象实例的构造函数Personui

2.`prototype`

构造函数Person下面有一个属性prototype,也称之为原型,这个属性是给程序员使用,是标准的属性,它的下面也有一个属性constructor,也叫构造器,constructor的值指向本身this

3.`proto`与`prototype`的关系

js对象都有__proto__属性,也就是构造函数Person与实例对象p也有spa
只有函数/方法才有prototype属性prototype
实例对象的__proto__指向了构造函数的原型对象prototype

实例对象的构造器指向建立本身的构造函数

console.log(p.__proto__.constructor==Person);//true
console.log(p.__proto__.constructor==Person.prototype.constructor);//true
复制代码

4.如何判断实例对象是否是这种数据类型

判断实例对象的构造器是否指向某一构造函数

<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>js对象</title> </head> <body> <script> function Person(name,age){ this.name=name; this.age=age; this.sex='男'; this.sayhi=function(){ console.log('hello world') } } function Dog(name,age){ this.name=name; this.age=age; } var p= new Person('gene',20); var d=new Animal('wangcai',1); console.log(d.__proto__.constructor==Person.prototype.constructor);//false //结果返回false,说明对象实例d不是由构造函数Person来建立的 </script> </body> </html> 复制代码

对象instanceof构造函数名字

console.log(d instanceof Person);//false,说明对象实例d不是由构造函数Person来建立的
复制代码

注意:建议使用第二种方法

四.对象原型实现数据共享

<script>
    function Person(name,age) {
    this.name=name;
    this.age=age;
}
//经过原型来添加方法,解决数据共享,节省内存空间
Person.prototype.sayhi=function () {
    console.log("你好呀");
};

var p1=new Person("小明",20);
var p2=new Person("小红",30);
p1.sayhi();
p2.sayhi();

console.log(p1.sayhi==p2.sayhi);//true

console.dir(p1);
console.dir(p2);
</script>
复制代码

实例对象中根本没有sayhi方法,可是可以使用,这是为何?

构造函数的原型对象(prototype)中的方法是能够被实例对象直接访问的
若是对象实例是来自同一个构造函数,那么这些对象实例即可以共享构造函数对象原型prototype中的数据
经过原型来添加方法,解决数据共享,节省内存空间

五.原型的简单语法

<script>
    function Person(name,age) {
    this.name=name;
    this.age=age;
}
//经过原型来添加方法,解决数据共享,节省内存空间
Person.prototype = {
    color:'yellow',
    height:180
};

var p1=new Person("小明",20);
var p2=new Person("小红",30);

console.log(p1.color);//yellow
console.log(p2.color);//yellow

</script>
复制代码

六.原型中的方法是能够互相访问的

<script>
    //原型中的方法,是能够相互访问的
    function Animal(name,age) {
    this.name=name;
    this.age=age;
}
//原型中添加方法
Animal.prototype.eat=function () {
    console.log("动物吃东西");
    this.play();
};
Animal.prototype.play=function () {
    console.log("玩球");
    this.sleep();
};
Animal.prototype.sleep=function () {
    console.log("睡觉了");
};

var dog=new Animal("旺财",20);
dog.eat();
</script>
复制代码