JavaScript原型
- 原型对象:我们所创建的每一个函数,解析器都会向函数中添加一个属性
prototype
,这个属性对应着一个对象,这个对象就是我们所谓的原型对象。
function Myclass(){
}
var mc = new Myclass();
console.log(Myclass.prototype);
- 如果函数作为普通函数调用
prototype
没有任何作用,当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的属性,指向该构造函数的原型对象,我们可以通过__proto__
来访问该属性。
function MyClass() {
}
var mc = new Myclass();
// console.log( Myclass.prototype);
// Myclass.prototype === mc.__proto__
console. log(mc.__proto__);
- 原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,我们可以将对象中共有的内容,统一设置到原型对象中。
- 当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,如果有则直接使用,如果没有则会去原型对象中寻找,如果找到则直接使用。
- 以后我们创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中,这样不用分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法了。
- 向原型对象中添加属性或方法。
//向MyClass的原型中添加属性a
MyClass.prototype.a = 123;
//向MyClass的原型中添加一个方法
MyClass.prototype.sayHello = function() {
alert("hel1o");
};
// 方法的调用
mc.sayHello();
- 检测对象中是否包含某属性,
in
和hasOwnProperty()
//创建一个构造函数
function Myclass() {
}
//向MyClass的原型中添加一个name属性
MyClass.prototype.name =“我是原型中的名字";
var mc = new Myclass();
// console.log(mc.name) ;
// 使用in检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回trueconsole.1og( "name" in mc );
// 可以使用对象的hasOwnProperty()来检查对象自身中是否含有i//使用该方法只有当对象自身中含有属性时,才会返回true
console.log(mc.hasOwnProperty( "age"));
- 原型对象也是对象,所以它也有原型,当我们使用一个对象的属性或方法时,会现在自身中寻找,自身中如果有,则直接使用,如果没有则去原型对象中寻找,如果原型对象中有则使用,如果没有则去原型的原型中寻找,直到找到
Object
对象的原型。
console.log(mc.__proto__.hasOwnProperty( "hasOwnProperty"));
console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty");
console.log(mc. __proto__.__proto__.__proto __);
0bject
对象的原型没有原型,如果在Object
中依然没有找到,则返回undefined
注意:
- 很多情况下,我们需要手动的利用
constructor
这个属性指回原来的构造函数 。 - 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必领手动的利用
constructor
指回原来的构造函数。
// 很多情况下,我们需要手动的利用constructor这个属性指回原来的构造函数
// Star.prototype.sing= function() {
// console.log("我会唱歌");
// };
// Star.prototype.movie = function() { // console.log( '我会演电影");
// }
Star.prototype = {
//如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必领手动的利用constructor指回原来的构造函数
constructor: Star,
sing: function() {
console.log('我会唱歌");
},
movie: function() {
console.log("我会演电影');
}
}
var ldh = new Star("刘德华", 18);
var zxy = new star(张学友", 19);
原型链
JavaScript的成员查找机制(规则)
- 当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。
- 如果没有就查找它的原型(也就是
__proto__
指向的prototype
原型对象)。 - 如果还没有就查找原型对象的原型(
Object
的原型对象)。 - 依此类推一直找到
Object
为止(null
) 。
公
// 原型对象的应用扩展内置对象方法console.log(Array.prototype);
Array.prototype.sum = function() {
var sum = 0;
for (var i = 0; i < this.length; i++) {
sum += this[i];
}
return sum;
}
var arr = [1,2,3];
console.log(arr.sum());
扩展内置对象
- 可以通过原型对象,对原来的内置对象进行扩展自定义的方法。比如给数组增加自定义求偶数和的功能。
- 注意∶数组和字符串内置对象不能给原型对象覆盖操作
Array.prototype = {}
,只能是Aray.prototype.ox = function(){}
的方式.
function fn(x,y) {
console.log("我想喝手磨咖啡');
console.log(this);
console.log(x + y);
}
var o = {
name: 'andy';
}
// fn();
// 1. call()可以调用函数
// fn.call();
// 2. call()可以改变这个函数的this指向,此时这个函数的this 就指向了o这个对象。
fn.call(o,1,2);
补充:
function Person(name, age) {
this.name = name;
this.age = age;
}
var per = new Person();
函数
都有prototype
属性,实例对象
都有构造函数
实例对象
中的__proto__
指向原型对象
,也就是构造函数
的prototype
console.log(Person.prototype === per.__proto__); // true
- 函数的
原型
的构造函数
等于自身
console.log(Person.prototype.constructor === Person); // true
实例对象
中的__proto__
就是该对象中构造函数
的prototype
console.log(per.__proto__ === per.constructor.prototype); // true
JavaScript中的 类class
其实就是封装的一个 语法糖
,其本质和构造函数一样,类中也包含 prototype
,其实力对象中包含 __proto__
,其原理和 构造函数创建实例
的过程 等价
。
原型链中的指向关系