Js构造函数

基本的构造函数不会有啥问题.

function f(){};  //函数 
var o = new f;  //对象, 而且是构造函数制造出来的普通对
f.prototype.p3=  ()=>{
    log("pppppp")
}

o.p3() //这个是正常的
(new f).p3() //这个也是正常的

然后加上this就出事了

function f(){
    let xxx="茶厂阿出产"
};  //函数 
f.prototype.p2=  ()=>{
    log(this)   //{}
    log(JSON.stringify(this))  //{}
    log(JSON.stringify(this.xxx))   //undefined
}
(new f).p2()

请教了大神, 原来是胖箭头的问题, 胖箭头的this定义不寻常

var log = console.log
function f(){
    let xxx="茶厂阿出产"
};  //函数 
f.prototype.p2 = function(){
    log("22222222")  //这里可以打印
    return this
}
(new f).p2() //这句执行一半就出错了, 然后错误是: p2不是函数.

问题很神奇, 人生中第一次发现js的[分号], 对就是[;]这个货, 竟然是有用的.

var log = console.log
function f(){
    let xxx="茶厂阿出产"
};
f.prototype.p2 = function(){
    log("22222222")  
    return this
}; //现在正常了, 没别的, 就是这个分号, 加上就好了.
(new f).p2()

结论:

1. 胖箭头的this有问题, 但是, 他没有分号问题.
2. 正常的function定义, 分号一定要加. 但是, 他的this是正常指向object的.

诡异现象的强行解释.

f.prototype.p2 = function(){
    log("22222222")  //这里可以打印
    return this
}
(new f).p2() //就是说, 如果没有分号, 这一行代表前面的function的参数就直接执行了.
//-------------------------
// 但是, 问题来了, 无法解释的是, 下面的代码运行正常: 
f.prototype.p3=  ()=>{
    log("pppppp")
}
(new f).p2().p3()  //这个运行正常的

胖箭头不仅仅匿名, 而且还改变了this的效果.

再复杂一点点

function f(){
    let xxx="茶厂阿出产"
};  
f.prototype.p1 = function (){
    log("11111")
    log(xxx)   // 这里会报错
    return this
};
f.prototype.p2 = function (){
    log("22222222")
    return this
};
f.prototype.p3=  function(t){
    log("pppppp")
    t.p1()
}
(new f).p2().p3((new f))  //这个运行时会报错, xxx is not define

必须做个修改:

function f(){
    this.xxx="茶厂阿出产"// 这里改, 必须的
};
f.prototype.p1 = function (){
    log("11111")
    log(this.xxx) //这里也改, 也是必须的
    return this
};