javascript - js自定义了函数，然后new用来调用，在函数体里面this ，和函数名可以替换吗？有什么区别

问题描述

问 题

function lazyload(className) {
    var obj = this;
    lazyload.className = className;
    console.log(this);
    console.log(lazyload);
    this.getOffset = function (el, isLeft) {
        var  retValue  = 0 ;
        ...
        return  retValue;
    };
    this.initImages = function (ele) {
        ...
    };
    this.showImage = function() {
        this.initImages();
        ...
        return true;
    };
    this.initImages();
    _attachEvent(window, 'scroll', function(){obj.showImage();});


new lazyload();

看到这样一段代码，
用console打印出lazyload和this变量，一个是返回的函数定义，一个是对象引用，不明白为什么，求解，可以将函数体内的lazyload替换为this吗？

解决方案

因为this指向的是这个函数对象原型上的constructor属性，直接写函数名当然就指向这整个函数对象。
搞懂这个，要理解一下js中函数对象的概念以及js是基于对象的脚本语言。

• js的函数是由Function()构造函数构建的：

//对于一个函数，你可以由以下几种方式来创建
function f(){};
var f = function(){};
var f = new Function();

注意看第三种方式，说明函数都是Function()的实例，而实例说白了就是对象，因此在js中函数也是对象，这是比较特别的一个地方。

• js中函数的this是由constructor属性实现的:

function F(){};
var f = new F();
console.dir(f);

按照以上操作，将在调试器中打印出一个对象的引用，展开即可发现__proto__这样一个属性，里面有一个construtor属性，这个就是this的指向，展开它则可以发现这就是一个函数定义，因此打印this会得到一个函数定义。

• 这两个的使用效果是有区别的，所以不能替换：

function F() {
    this.className="A";
    F.class="B";
}
console.log(F.hasOwnProperty('className'));//false
console.log(F.hasOwnProperty('class'));//true

通过私有属性检查方法可以得知，用this定义的属性是绑定在F()这个构造函数中的，因此通过它创建的实例都具有这个属性；而引用其本身来定义的属性，是F这个对象所具有的的私有属性，通过它创建的实例则不具有这个属性（因为new出来的都是一个新的对象嘛）。

这篇关于javascript - js自定义了函数，然后new用来调用，在函数体里面this ，和函数名可以替换吗？有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！