补充原型知识点:
以这个代码为例延伸知识点:
function Person() {}
Person.prototype.name = 'Zaxlct';
Person.prototype.age = 28;
Person.prototype.job = 'Software Engineer';
Person.prototype.sayName = function() {
alert(this.name);
}
var person1 = new Person();
person1.sayName(); // 'Zaxlct'
var person2 = new Person();
person2.sayName(); // 'Zaxlct'
console.log(person1.sayName == person2.sayName); //true
1、每个对象都有 proto 属性,但只有函数对象才有 prototype 属性
2、原型对象就是 Person.prototype,在默认情况下,所有的原型对象都会自动获得一个 constructor(构造函数)属性,这个属性(是一个指针)指向 prototype 属性所在的函数(Person),翻译一下就是(Person.prototype)有一个默认的constructor属性,这个属性是一个指针,指向Person这个函数,即:Person.prototype.constructor == Person
3、上例中person1和person2又是由Person实例化出的对象,而实例的构造函数的constructor属性也是指向Person函数,即:person1.constructor == Person
4、根据:
Person.prototype.constructor == Person
person1.constructor == Person。
结论:原型对象(Person.prototype)是 构造函数(Person)的一个实例。
5、原型对象其实就是普通对象(但 Function.prototype 除外,它是函数对象,但它很特殊,他没有prototype属性(前面说道函数对象都有prototype属性))
function Person(){};
console.log(Person.prototype) //Person{}
console.log(typeof Person.prototype) //Object
console.log(typeof Function.prototype) // Function,这个特殊
console.log(typeof Object.prototype) // Object
console.log(typeof Function.prototype.prototype) //undefined
6、实例的构造函数属性(constructor)指向构造函数。
7、特例;console.log(typeof Function.prototype) 输出是function 也就是说Function.prototype是函数对象(第5点提到)。那么关于这个函数对象的有—>Function.prototype.proto === Object.prototype 和 Person.prototype.proto === Object.prototype,疑问的是:一个普通对象的构造函数是Object,那么第一个等式什么意思?
8、原型链的顶端是null—> Object.prototype.proto === null
9、自行解答问题:
person1.__proto__ 是什么?
Person.__proto__ 是什么?
Person.prototype.__proto__ 是什么?
Object.__proto__ 是什么?
Object.prototype__proto__ 是什么?
//例题
function Person(){}
var person1 = new Person();
console.log(person1.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype) //true
console.log(Object.prototype.__proto__) //null
Person.__proto__ == Function.prototype; //true
console.log(Function.prototype)// function(){} (空函数)
var num = new Array()
console.log(num.__proto__ == Array.prototype) // true
console.log( Array.prototype.__proto__ == Object.prototype) // true
console.log(Array.prototype) // [] (空数组)
console.log(Object.prototype.__proto__) //null
console.log(Array.__proto__ == Function.prototype)// true
题目:实现 (5).add(3).minus(2) 功能
Number.prototype.add = function(n) {
return this.valueOf() + n;
};
Number.prototype.minus = function(n) {
return this.valueOf() - n;
};
//这题就考了原型对象的使用,函数里面的this指向Number中原型对象的方法,add就是新添方法
附图理解:
废话不多说,附上一段大图滚动的简单原型使用的代码:
(function(exports) {
function roll(obj) {
this.$box = document.getElementById(obj.parID) || document.getElementById("wrap");
this.$con = document.getElementById(obj.rollID) || document.getElementById('con');
this.$imgs = this.$con.children;
this.startVal = this.$box.scrollLeft;
this.times = null; //计时器23
this.imgNum = 0;
this.rollNum = obj.rollNum || 1;//滚动图片的个数,默认为1(只能是偶数)25
this.speed = obj.speed || 7;//滚动的速度,默认为726
this.width = obj.width || 400;//滚动的距离,默认为40027
this.stopTime = obj.stopTime || 2000;//停止的时间28
this.init();
};
roll.prototype = {
constructor: "roll", //署名constructor属性的指向
init: function() {
var _this = this;
setTimeout(function() {
_this.imgSco();
}, this.stopTime);
},
imgSco: function() {
this.imgNum += this.rollNum;
if (this.imgNum >= this.$imgs.length) {
if (this.imgNum == this.$imgs.length - 1) {
this.imgNum++;
} else {
this.imgNum = 0;
}
}
this.startMove(this.imgNum * this.width);
},
startMove: function(moveL) {
var _this = this;
var moveL = moveL;
this.times = setInterval(function() {
_this.timeMove(moveL);
}, 10);
},
timeMove: function(moveL) {
var _this = this;
if (this.startVal < moveL) {
this.startVal += this.speed;
if (this.startVal >= moveL) {
this.startVal = moveL;
setTimeout(function() {
_this.imgSco();
}, this.stopTime);
clearInterval(this.times);
}
} else if (this.startVal > moveL) {
this.startVal -= this.speed;
if (this.startVal<= moveL) {
this.startVal = moveL;
setTimeout(function() {
_this.imgSco();
}, this.stopTime);
clearInterval(this.times);
}
}
this.$box.scrollLeft = this.startVal;
}
}
exports.roll = roll; })(window)