prototype属性 原型属性 / 实例属性 自身属性-----------------构造函数外面 / 里面定义的属性/方法,属性/方法的引用地址 一样 / 不一样

http://www.w3school.com.cn/jsref/jsref_prototype_array.asp

https://www.cnblogs.com/xiaohuochai/p/5721552.html

https://www.zhihu.com/question/34183746/answer/58068402

https://blog.csdn.net/tashanhongye/article/details/74277061


javascript 原型属性(prototype 属性)与 实例属性(自身属性)

讲到原型属性,prototype属性实例属性,自身属性,首先我们要明白这四者之间的关系。我查了一些资料,原型属性又叫prototype属性,实例属性又叫自身属性。只是叫法不同。下面我要引用他人写的一段代码来加以说明:

1:实例属性指的是在构造函数方法中定义的属性,属性和方法都是不一样的引用地址例如:

function CreateObject(name,age){
    this.name=name;  //实例属性
    this.age=age;
    this.run=function(){   //实例方法
        return this.name + this.age;
    }

    //可以设置全局方法来实现引用地址一致性 .会出现问题
    //this.run = run;
}


var box1 = new CreateObject('ZHS',100);
var box2 = new CreateObject('ZHS',100);


console.log(box1.name == box2.name);//true
console.log(box1.run() == box2.run());//true
console.log(box1.run == box2.run); //false 比较的是引用地址
  •  

如何让box1,和box2run方法的地址一致呢?使用冒充 
例如:

//对象冒充
var o = new Object();
Box.call(o,'xlp',200);
console.log(o.run());
  •  

2.原型属性指的是不在构造函数中定义的属性,属性和方法都是一样的引用地址,例如

function CreateObject(){}
CreateObject.prototype.name='ZHS';
CreateObject.prototype.age='100';
CreateObject.prototype.run=function(){
    return this.name + this.age;
}

var CreateObject1 = new CreateObject();
var CreateObject2 = new CreateObject();
console.log(CreateObject1.run == CreateObject2.run); //true
console.log(CreateObject1.prototype);//这个属性是个对象,访问不了
console.log(CreateObject1.__proto__);//这个属性是个指针指向prototype原型对象
console.log(CreateObject1.constructor);//构造属性
如果我们在CreateObject1 添加自己属性呢?例如
CreateObject1.name='XLP';
console.log(CreateObject1.name);// 打印XLP //就近原则
可以使用delete删除实例属性和原型属性
delete CreateObject1.name;  //删除实例中的属性
delete CreateObject.prototype.name ;//删除原型中的属性
  •  

为了更进一步说明prototype属性,在此我再增加一段代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript">
    function employee(name,age,address){
        this.name=name;
        this.age=age;
        this.address=address;

        this.hello=function(){
            return "名字:"+this.name+";"+"年龄:"+this.age+";"+"地址:"+this.address;
        }
    }

    var employ1=new employee("小欧",23,"浙江衢州");
    employee.prototype.country="中国";
    document.write(employ1.country);
    document.write("<br>");
    document.write(employ1.hello());

</script>
</body>
</html>

ouput:

中国 
名字:小欧;年龄:23;地址:浙江衢州

实例化的对象可以共享原型对象的所有属性与方法。

例子如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript">
    function createPerson(name,age,address){
        this.name=name;
        this.age=age;
        this.address=address;
        this.sayname=function (){
            return this.sex;
        }
    }

    createPerson.prototype.sex="女";

    var Obj=new createPerson("xiaohong",25,"武汉");
    document.write(Obj.sex);
    document.write("<br>");
    document.write(Obj.sayname());


</script>
</body>
</html>
  •  

output: 
女 

通过上面的例子可以看出,我在实例方法中照样可以访问下面所定义的原型属性的值。



定义和用法

prototype 属性使您有能力向对象添加属性和方法。

语法

object.prototype.name=value

实例

在本例中,我们将展示如何使用 prototype 属性来向对象添加属性:

<script type="text/javascript">

function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}

var bill=new employee("Bill Gates","Engineer",1985);

employee.prototype.salary=null;
bill.salary=20000;

document.write(bill.salary);

</script>

输出:

20000



关于原型,则是prototype、proto和constructor的三角关系:



几乎任何对象有一个[[prototype]]属性,在标准中,这是一个隐藏属性。该属性指向的是这个对象的原型。

那么一个对象的[[prototype]]属性究竟怎么决定呢?这是由构造该对象的方法决定的。据我所知有三种构造一个对象的方法:

  1. 这个对象是通过对象字面量构造出来的。
    var person1 = {
        name: 'cyl',
        sex: 'male'
    };
    
    形如这个形式的叫做对象字面量。这样子构造出的对象,其[[prototype]]指向Object.prototype
  2. 这个对象是由构造函数构造出来的。
    function Person(){}
    var person1 = new Person();
    
    通过new操作符调用的函数就是构造函数。由构造函数构造的对象,其[[prototype]]指向其构造函数的prototype属性指向的对象。每个函数都有一个prototype属性,其所指向的对象带有constructor属性,这一属性指向函数自身。(在本例中,person1的[[prototype]]指向Person.prototype)
  3. 这个对象是由函数Object.create构造的。
    var person1 = {
        name: 'cyl',
        sex: 'male'
    };
    
    var person2 = Object.create(person1);
    
    本例中,对象person2的[[prototype]]指向对象person1。在没有Object.create函数的日子里,人们是这样做的:
    Object.create = function(p) {
        function f(){}
        f.prototype = p;
        return new f();
    }
    



然而虽然说[[prototype]]是一个隐藏属性,但很多浏览器都给每一个对象提供.__proto__这一属性,这个属性就是上文反复提到的该对象的[[prototype]]。由于这个属性不标准,因此一般不提倡使用。ES5中用Object.getPrototypeOf函数获得一个对象的[[prototype]]。ES6中,使用Object.setPrototypeOf可以直接修改一个对象的[[prototype]]


--------------------------------
至于什么原型链之类的,都很好理解,这里就不说了。


------------------------------------
某答案说.__proto__ === .constructor.prototype是不对的,如果一个对象是通过Object.create函数构造出来的,.那其__proto__就不一定是.constructor.prototype了
阅读更多
版权声明: https://blog.csdn.net/zgpeterliu/article/details/80318047
个人分类: js/H5/性能优化
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭