tips1.原型链
//一个原型(本身是一个对象)中有两个属性:constructor & __proto__
GrandFather.prototype.lastName = 'deng';
function GrandFather() {
this.bike = 1;
}
Father.prototype = new GrandFather();
function Father() {
this.fortune = {
money: 9999999,
house: 4
}
this.name = "hahah"
this.girl = 'h1'
}
Son.prototype = new Father(); //更改了原型
function Son() {
this.name = 'heihei'
this.age = 20;
}
var oSon = new Son();
oSon.lastName = 'Chen';
// GrandFather.prototype.lastName = 'hong';
var oSon2 = new Son();
console.log(oSon2.lastName);
oSon.__proto__.fortune.house += 1;
// Son.prototype.fortune.house += 1;
// Son.prototype.fortune.house += 1;
var oSon2 = new Son();
console.log(oSon2.fortune.house);
console.log(oSon.fortune.money);
oSon.girl = 'h2';
console.log(oSon.girl);
console.log(oSon2.girl);
// oSon.lastName = {
// name: 'chen'
// }
console.log(oSon.lastName);
console.log(oSon2.lastName);
oSon.fortune = {
money: 8888888,
house: 3
}
// oSon.__proto__.fortune
// Son.prototype.fortune = {
// money: 8888888,
// house: 3
//}
// Son.prototype = {
// name: 'hehe',
// fortune: {
// money: 7777777,
// house: 2
// }
// }
var oSon3 = new Son();
console.log(oSon.fortune.house); //3
console.log(oSon3.fortune.house); //5
console.log(oSon2.fortune.house); //5
- 改变默认原型对象
- oSon.lastname = ‘cherry’ | Oson.fortune = { house = 3} 这些是在oSon对象里添加了新的属性,该行为只与自身有关
- oSon.fortune.house = ‘4’ 是改变了原型的某一项属性,凡是指向该原型对象,均受影响
- Son.prototype = {fortune: { house: 2 }} 是更改了原型的指向,在更改前的对象的_proto_指向不变,新建的对象会按照新的原型继承
- 原型链的顶端都是Object.prototype -> {} | var obj = Object.create(demo) [括号里传参数null(没有原型)或者object(指定原型)] / [obj._proto_== demo]
tips2.原型方法的重写
GrandFather.prototype.lastName = 'deng';
GrandFather.prototype.say = function() {
console.log('tell me GrandFather');
};
function GrandFather() {
this.bike = 1;
}
Father.prototype = new GrandFather();
function Father() {
this.fortune = {
money: 9999999,
house: 4
}
this.name = "hahah"
this.girl = 'h1'
this.say = function() {
console.log('tell me father');
}
}
Son.prototype = new Father();
function Son() {
this.name = 'heihei'
this.age = 20;
}
var oSon = new Son();
oSon.say();
- 对象通过原型链从下游向上游寻找目标,若顶端有目标,中间有目标,则使用中间的目标,中间的目标覆盖上游目标。
Object.prototype.toString();
//谁调用了这个方法,调用方法的类型就可以输出
var obj = {};
obj.toString(); //[object Object]
var arr = [1, 2, 3];
arr.toString(); //1,2,3 用toString没有实现功能
//arr.constructor(查询构造函数) -> function Array(){[native code]}
//Array.prototype -> toString 方法在下游被重写
- 原本在原型链顶端的Object.prototype中有目标方法toString();但在搜索过程中下游Array.prototype中重新定义了toString();导致无法实现预想功能
console.log(Object.prototype.toString.call(arr));
- 使用call来改变this的指向,即‘arr’使用‘Object.prototype.toString’方法而不是默认的‘Array.prototype.toString’
tips3.call&apply
-
每个函数都包含两个非继承而来的方法:call()方法和apply()方法。
-
都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域。
-
一般来说,this总是指向调用某个方法的对象,但是使用call()和apply()方法时,就会改变this的指向。
-
相同点:这两个方法的作用是一样的。
-
不同点:接收参数的方式不同。
-
apply()方法 接收两个参数,一个是函数运行的作用域(this),另一个是参数数组。
语法:apply([thisObj [,argArray] ]);,调用一个对象的一个方法,2另一个对象替换当前对象。
说明:如果argArray不是一个有效数组或不是arguments对象,那么将导致一个 TypeError,如果没有提供argArray和thisObj任何一个参数,那么Global对象将用作thisObj。 -
call()方法 第一个参数和apply()方法的一样,但是传递给函数的参数必须列举出来。
语法:call([thisObject[,arg1 [,arg2 [,…,argn]]]]);,应用某一对象的一个方法,用另一个对象替换当前对象。
说明: call方法可以用来代替另一个对象调用一个方法,call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象,如果没有提供thisObj参数,那么Global对象被用于thisObj。
-
后面使用前面的功能,后面替换前面的对象
function Person(name, age) {
//(Person)var this = {
//name:null,
//age:null, --------------??
//}
this.name = name;
this.age = age;
}
function Student(name, age, myClass) {
//构造函数,(Student)var this = {
//myClass:null,
//name:
//age:
//}
Person.call(this, name, age); //Person.name -> Student.name
this.myClass = myClass;
}
console.log(new Student('cst', 20, 1));
- (student)替换了(person)的this,相当于student使用了person的方法
var numObj = {
x: 1,
y: 2
}
function add(a, b) {
console.log(this.x + a + this.y + b);
}
add(3, 4); //NaN undefined+3+undefined+4
//window.add.call(window) this->window window里没有x,y
// add.call(numObj, 3, 4); //10
add.apply(numObj, [3, 4]);
- numObj使用了add中的方法,numObj把自己的属性代入进去
function cat() {}
cat.prototype = {
food: "fish",
say: function() {
alert("I love " + this.food);
}
}
var blackCat = new cat;
blackCat.say();
var whiteDog = {
food: 'bone',
}
blackCat.say.call(whiteDog);
//动态改变this,当一个对象没有某个方法,但是其他的有
- whiteDog使用blackCat的方法,并带着自己的参数‘bone’
window.color = 'red';
document.color = 'yellow';
var s1 = {
color: 'blue'
};
function changeColor() {
console.log(this.color);
}
changeColor.call(); //red (默认传递参数)
changeColor.call(window); //red
changeColor.call(document); //yellow
changeColor.call(this); //red -------------------??
changeColor.call(s1); //blue
var Pet = {
words: '...',
speak: function(say) {
console.log(say + this.words)
}
}
Pet.speak('Speak'); // 结果:Speak...
var Dog = {
words: 'Wang'
}
//将this的指向改变成了Dog
Pet.speak.call(Dog, 'Speak'); //结果: SpeakWang
- Dog使用Pet的方法
[1127追加]:
tip1:探索普通函数和构造函数内部区别
function test() {
console.log(this);
console.log('test');
}
test();
//'this'是 window.this 即函数内部没有创建this对象
//普通函数执行功能
function Test() {
//var this = {__proto__:test.prototype}
console.log(this);
console.log('test');
//return this
}
var a = new Test();
//通过new定义函数,是构造函数,通常每个单词首字母大写
//通过new来执行函数,会在函数中默认定义一个this对象,会返回一个对象
//运行结果可以看出'this'并没有输出,是函数内部的this对象
function test() {
console.log(this);
console.log('test');
}
test();
test.call(window);
var obj = {
name: 'cst'
}
test.call(obj);
//执行test 相当于test.call(window) 'window' call 'test'
//括号内第一个参数就决定了前面这个函数中this是谁
//不传参数默认为test.call(window)
//传入参数'obj' 'obj' call 'test' =>(this->obj)=>console.log(obj)
function Person(name, age, sex) {
//预编译阶段构造函数 creative new this {}
//预编译后产生this对象,每次执行都新建一个对象,都不是一个this
this.name = name;
this.age = age;
this.sex = sex;
}
var oPerson = new Person();
//构造函数的方式运行函数,会创建this对象,执行时this才有意义
function Student(name, age, sex, grade, clas) {
// creative this {}
// this.name = name;
// this.age = age;
// this.sex = sex;
Person.call(this, name, age, sex); //不传参数默认是window 在此处传实参
this.grade = grade;
this.clas = clas;
//return this;
}
var oStudent = new Student('yp', 18, 'man', 3, 3);