JS高级程序设计 笔记

1.instanceof 可以判断实例是否在某个对象的原型上:
function A() {
this.a = "a";
}
function B() {
this.b = "b";
}
B.prototype = new A();
var test = new B();
console.log(test instanceof A); //true
console.log(test instanceof B); //true
console.log(test instanceof Object); //true
//test拥有A、B、Object任何一个构造器的属性和方法

  

 
 
2.hasOwnProperty 可以判断对象是否有prototype原型的属性,但是不包括继承过来的属性和方法,如果要判断包括继承的属性,用 in。
function A() {
this.a = "a";
}
A.prototype.b = "b";
console.log(A.prototype.hasOwnProperty("a")); //false
console.log(A.prototype.hasOwnProperty("b")); //true
console.log(A.prototype.hasOwnProperty("hasOwnProperty")); //false
console.log('hasOwnProperty' in A); //true
 
 
 
2.5.访问实例属性时,先在该实例搜索该属性。如果没有该属性,就搜索原型。如果通过原型链实现继承,就会顺着原型链往上搜索。 也就是说,子类的属性不会覆盖继承自原型链的属性。
function A(){
this.prop = 'a';
}
function B(){
this.prop = 'b';
this.method = function(){
console.log(this.prop); //b
delete this.prop;
console.log(this.prop); //a
}
}
B.prototype = new A();
var test = new B();
test.method();

  

 
 
3.每个对象的prototype原型上都有constructor属性,指向构造它的函数
function A() {
this.a = "a";
}
console.log(A.prototype.constructor === A); //true

  

4.call和apply可以改变this的作用域

function A() {
this.name = "a";
this.method = function(){
var arr = Array.prototype.slice.call(arguments);
console.log(arr.join(' ') + " " + this.name);
}
}
var a = new A();
var b = {
name: "b"
}; a.method.call(b, '1', '2', '3'); //1,2,3 b
function A(name) {
this.name = name;
this.method = function(){
console.log(this.name);
}
}
function B() {
A.call(this, "a");
}
var test = new B();
test.method(); // a
test.name = "b";
test.method(); // b

  

区别是appy用的是数组

function A(arg1, arg2) {
this.method = function() {
console.log(arg1, arg2);
};
}
function B() {
A.apply(this, ["1", "2"]);
}
var test = new B();
test.method(); // 1, 2

  

 
5.组合继承方式用call继承属性,用prototype实例化对象继承方法
function A(name) {
this.name = name;
}
A.prototype.method = function() {
console.log(this.name);
}
function B(name) {
A.call(this, name);
}
B.prototype = new A(); var t1 = new B("2");
t1.method(); //2 var t2 = new B("3");
t2.method(); //3 console.log(t1.method == t2.method); //true

  

 
6.工厂模式和寄生构造函数模式
    除了寄生构造函数模式需要用new实例化构造函数,并且包装名被叫做构造函数以外,和工厂模式没有本质性的区别。
    也可以说两者就是概念的区别,结果一样,只是用new能够直观看出是寄生构造函数。
寄生构造函数应用场景在于不污染原生对象的情况下添加方法,缺点在于不能用instanceof来确定所属对象。
 
 
    函数第一次调用时,生成执行上下文与活动对象(actviation object)。
    活动对象里面包含arguments,this,函数内部声明的变量
 
 
7.function的this永远指向调用它的对象,而不是函数创建时所在的对象。而鉴于JS所谓的“万物皆对象”,这个this因此可以是任何物件,比如Global对象。
 
var x = 0;
var foo = {
x:1,
bar:{
x:2,
baz: function () {
console.log(this.x);
}
}
} foo.bar.baz(); // 2
var a = foo.bar.baz;
a(); //0
(foo.bar.baz = foo.bar.baz)() //0

  

 
    因为this永远指向函数被调用时的对象,由于 var a = foo.bar.baz; ,相当于把 foo.bar.baz 的函数复制了一份给 a ,所以执行 a() 的时候,相当于 window.a() ,也就是this指向了执行的对象 window,所以输出0。
    而(foo.bar.baz = foo.bar.baz)();     这句先执行括号内的赋值语句,赋值完成后返回foo.bar.baz 方法。但是执行的却是IIFE,也就是函数而不是对象的方法,this指向的是window这个对象,所以也输出0。
 
foo = function(){
this.myName = "Foo function.";
}
foo.prototype.sayHello = function(){
console.log(this.myName);
}
foo.prototype.bar = function(){
setTimeout(this.sayHello, 10);
}
var f = new foo;
f.bar();
 
    setTimeout会将第一个参数推到下一个事件循环的全局环境执行。由于this指向被调用的环境,相当于setTimeout里的this指向window。所以在这里sayHello方法里的this指向了window导致输出undefined。
 
    如果要输出foo.myName的话,可以用bind方法将setTimeout中的 this 指向foo里的this。setTimeout(this.sayHello.bind(this), 10);
 
 
 
 
8.变量当对象的属性
var obj = {};
var p1;
var p2 = "a";
obj[p1] = 123;
obj[p2] = 456;
console.log(obj[p1]); //123
console.log(obj.a === obj[p2]); //true

  

 
上一篇:JSP取得绝对路径


下一篇:电厂MIS,SIS简介