js学习笔记之自调用函数和原型链

最新推荐文章于 2021-11-28 22:10:54 发布

转载最新推荐文章于 2021-11-28 22:10:54 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/nightstarsky/p/9182756.html

本文探讨了自调用函数的行为及变量提升陷阱，并详细分析了JavaScript中对象的原型链工作原理，包括如何通过构造函数创建对象以及如何访问原型链上的属性。

自调用函数

var name = 'world!';
    // console.log(typeof name)
    (function () {
        console.log(this.name, name, typeof name, typeof name === undefined)
        if(typeof name === undefined){
            var name = 'a!'
            console.log('hello ' + name)
        } else{
            var name = 'b!'
            console.log('hello ' + name)
        }
    })();

运行结果是

"world!" undefined "undefined" false
hello b!

这里有两个陷阱 
第一个是变量提升后 name 值为 undefined 
第二个是 typeof name 为字符串 "undefined"

原型链
所有对象的 __proto__ 都指向其构造器的 prototype
所有函数对象的 __proto__ 都指向 Function.prototype，它是一个空函数（Empty function）
Object.prototype.__proto__ === null

function fn() {
        this.a = 10
        this.b = function () {
           console.log(this.a)
        }
    }
    fn.prototype = {
        b: function () {
            this.a = 20
            console.log(this.a)
        },
        c: function () {
            this.a = 30
            console.log(this.a)
        }
    }
    var myfn = new fn();
    console.log(myfn) //对象属性有a，b；原型链继承属性有b，c

console.log(myfn.__proto__ === fn.prototype) // true
console.log(myfn.__proto__ === myfn.constructor.prototype) // false

myfn.b() //10 
myfn.c() //30 
myfn.b() //30

解析
myfn对象第一次调用b方法，由于原型链上的b方法被覆盖，所以始终调用自身的b方法，所以就输出初始值10
myfn调用c方法等于是调用继承的c方法，所以a属性被重新赋值，于是输出30
myfn第二次调用b方法，由于a属性已经被c方法重新赋值，所以继续输出30

myfn.__proto__始终指向构造器fn的prototype属性
但是myfn.__proto__不再指向myfn.constructor.prototype

myfn本身没有constructor属性，于是指向fn.prototype.constructor属性，
而fn.prototype.constructor本来应该指向其自身，但是因为重新赋值fn.prototype对象，所以fn.prototype的构造函数变成了Object

引用指针

var a = {n:1}; 
var b = a;  
a.x = a = {n:2}; 
console.log(a.x);// --> undefined 
console.log(b.x);// --> [object Object]

转载于:https://www.cnblogs.com/nightstarsky/p/9182756.html