菜单导航,《JS面向对象笔记一》,  参考书籍:阮一峰之《JavaScript标准参考教程》

一、构造函数和new命令

二、this关键字

三、构造函数和new命令

四、构造函数和new命令

五、构造函数和new命令

六、构造函数和new命令

七、构造函数和new命令

八、构造函数和new命令

一、构造函数和new命令

1、构造函数

  • JavaScript语言的对象体系,不是基于“类”的,而是基于构造函数(constructor)和原型链(prototype)
  • 为了与普通函数区别,构造函数名字的第一个字母通常大写,比如:  var Person = function(){  this.name = '王大锤';  }
  • 构造函数的特点: 
           a、函数体内部使用了this关键字,代表了所要生成的对象实例;
       b、生成对象的时候,必需用new命令调用此构造函数

2、new

  作用:就是执行构造函数,返回一个实例对象 

var Person = function(name, age){
    this.name = name;
    this.age = age;
    this.email = 'cnblogs@sina.com';
    this.eat = function(){
        console.log(this.name + ' is eating noodles');
    }
}

var per = new Person('王大锤', 18);
console.log(per.name + ', ' + per.age + ', ' + per.email); //王大锤, 18, cnblogs@sina.com
per.eat();  //王大锤 is eating noodles

执行new命令时的原理步骤:

  1. 创建一个空对象,作为将要返回的对象实例
  2. 将这个空对象的原型,指向构造函数的prototype属性
  3. 将这个空对象赋值给函数内部的this关键字
  4. 开始执行构造函数内部的代码

注意点:当构造函数里面有return关键字时,如果返回的是非对象,new命令会忽略返回的信息,最后返回时构造之后的this对象;
  如果return返回的是与this无关的新对象,则最后new命令会返回新对象,而不是this对象。示例代码:

console.log('---- 返回字符串 start ----');
var Person = function(){
    this.name = '王大锤';
    return '罗小虎';
}

var per = new Person();
for (var item in per){
    console.log( item + ': ' + per[item] );
}
//---- 返回字符串 start ----
//name: 王大锤

console.log('----- 返回对象 start ----');
var PersonTwo = function(){
    this.name = '倚天剑';
    return {nickname: '屠龙刀', price: 9999 };
}
var per2 = new PersonTwo();
for (var item in per2){
    console.log(item + ': ' + per2[item]);
}
//----- 返回对象 start ----
//nickname: 屠龙刀
//price: 9999

如果调用构造函数的时候,忘记使用new关键字,则构造函数里面的this为全局对象window,属性也会变成全局属性,

则被构造函数赋值的变量不再是一个对象,而是一个未定义的变量,js不允许给undefined添加属性,所以调用undefined的属性会报错。

示例:

var Person = function(){
    console.log( this == window );  //true
    this.price = 5188;
}
var per = Person();
console.log(price);
console.log(per);  //undefined
console.log('......_-_'); //......_-_
console.log(per.price); //Uncaught TypeError: Cannot read property 'helloPrice' of undefined

为了规避忘记new关键字现象,有一种解决方式,就是在函数内部第一行加上 : 'use strict';

表示函数使用严格模式,函数内部的this不能指向全局对象window, 默认为undefined, 导致不加new调用会报错

var Person = function(){
    'use strict';
    console.log( this );  //undefined
    this.price = 5188; //Uncaught TypeError: Cannot set property 'helloPrice' of undefined
}

var per = Person(); 

另外一种解决方式,就是在函数内部手动添加new命令:

var Person = function(){
    //先判断this是否为Person的实例对象,不是就new一个
    if (!(this instanceof Person)){
        return new Person();
    }
    console.log( this );  //Person {}
    this.price = 5188;
}

var per = Person();
console.log(per.price); 

二、this关键字

var Person = function(){
    console.log('1111');
    console.log(this);
    this.name = '王大锤';
    this.age = 18;

    this.run = function(){
        console.log('this is Person的实例对象吗:' + (this instanceof Person) );
        console.log(this);
    }
}

var per = new Person();
per.run();
/* 打印日志:
1111
Person {}
this is Person的实例对象吗:true
Person {name: "王大锤", age: 18, run: function}
*/

console.log('---------------');

var Employ = {
    email: 'cnblogs@sina.com',
    name: '赵日天',
    eat: function(){
        console.log(this);
    }
}

console.log(Employ.email + ', ' + Employ.name);
Employ.eat();
/* 打印日志:
---------------
cnblogs@sina.com, 赵日天
Object {email: "cnblogs@sina.com", name: "赵日天", eat: function}
*/

1、this总是返回一个对象,返回属性或方法当前所在的对象, 如上示例代码

2、对象的属性可以赋值给另一个对象,即属性所在的当前对象可变化,this的指向可变化

var A = {
    name: '王大锤',
    getInfo: function(){
        return '姓名:' + this.name;
    }
}

var B = { name: '赵日天' };

B.getInfo = A.getInfo;
console.log( B.getInfo() ); //姓名:赵日天

//A.getInfo属性赋给B, 于是B.getInfo就表示getInfo方法所在的当前对象是B, 所以这时的this.name就指向B.name

3、由于this指向的可变化性,在层级比较多的函数中需要注意使用this。一般来说,在多层函数中需要使用this时,设置一个变量来固定this的值,然后在内层函数中这个变量。

示例1:多层中的this

//1、多层中的this (错误演示)
var o = {
    f1: function(){
        console.log(this); //这个this指的是o对象

        var f2 = function(){
            console.log(this);
        }();
        //由于写法是(function(){ })() 格式, 则f2中的this指的是顶层对象window
    }
}

o.f1();
/* 打印日志:
Object {f1: function}

Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
*/

//2、上面代码的另一种写法(相同效果)
var temp = function(){
    console.log(this);
}
var o = {
    f1: function(){
        console.log(this); //这个this指o对象
        var f2 = temp(); //temp()中的this指向顶层对象window
    }
}
o.f1();
/* 打印日志
Object {f1: function}

Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
*/
//表示上面两种写法是一样的效果,this的错误演示

//3、多层中this的正确使用:使用一个变量来固定this对象,然后在内层中调用该变量
var o = {
    f1: function(){
        console.log(this); //o对象
        var that = this;
        var f2 = function(){
            console.log(that); //这个that指向o对象
        }();
    }
}
o.f1();
/* 打印日志:
Object {f1: function}
Object {f1: function}
*/

示例2: 数组遍历中的this

//1、多层中数组遍历中this的使用 (错误演示)
var obj = {
    email: '大锤@sina.com',
    arr: ['aaa', 'bbb', '333'],
    fun: function(){
        //第一个this指的是obj对象
        this.arr.forEach(function(item){
            //这个this指的是顶层对象window, 由于window没有email变量,则为undefined
            console.log(this.email + ': ' + item);
        });
    }
}

obj.fun();
/* 打印结果:
undefined: aaa
undefined: bbb
undefined: 333
 */

//2、多层中数组遍历中this的使用 (正确演示,第一种写法)
var obj = {
    email: '大锤@sina.com',
    arr: ['aaa', 'bbb', '333'],
    fun: function(){
        //第一个this指的是obj对象
        var that = this; //将this用变量固定下来
        this.arr.forEach(function(item){
            //这个that指的是对象obj
            console.log(that.email + ': ' + item);
        });
    }
}
obj.fun(); //调用
/* 打印日志:
大锤@sina.com: aaa
大锤@sina.com: bbb
大锤@sina.com: 333
 */

//3、多层中数组遍历中this正确使用第二种写法:将this作为forEach方法的第二个参数,固定循环中的运行环境
var obj = {
    email: '大锤@sina.com',
    arr: ['aaa', 'bbb', '333'],
    fun: function(){
        //第一个this指的是obj对象
        this.arr.forEach(function(item){
            //这个this从来自参数this, 指向obj对象
            console.log(this.email + ': ' + item);
        }, this);
    }
}
obj.fun(); //调用
/* 打印日志:
大锤@sina.com: aaa
大锤@sina.com: bbb
大锤@sina.com: 333
 */

4、关于js提供的call、apply、bind方法对this的固定和切换的用法

1)、function.prototype.call(): 函数实例的call方法,可以指定函数内部this的指向(即函数执行时所在的作用域),然后在所指定的作用域中,调用该函数。
  如果call(args)里面的参数不传,或者为null、undefined、window, 则默认传入全局顶级对象window;
  如果call里面的参数传入自定义对象obj, 则函数内部的this指向自定义对象obj, 在obj作用域中运行该函数

var obj = {};
var f = function(){
    console.log(this);
    return this;
}

console.log('....start.....');
f();
f.call();
f.call(null);
f.call(undefined);
f.call(window);
console.log('**** call方法的参数如果为空、null和undefined, 则默认传入全局等级window;如果call方法传入自定义对象obj,则函数f会在对象obj的作用域中运行 ****');
f.call(obj);
console.log('.....end.....');

/* 打印日志:
....start.....
Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
**** call方法的参数如果为空、null和undefined, 则默认传入全局等级window;如果call方法传入自定义对象obj,则函数f会在对象obj的作用域中运行 ****
Object {}
.....end.....
*/

JS面向对象笔记二的更多相关文章

  1. [转]node.js学习笔记(二)

    二.express 1.安装 express4 npm --registry=http://registry.npmjs.org install -g express-generator (全局) 2 ...

  2. 【转】require.js学习笔记(二)

    require.js遵循AMD规范,通过define定义模块,require异步加载模块,一个js文件即一个模块. 一.模块加载require1.加载符合AMD规范模块 HTML: <scrip ...

  3. Node.js学习笔记(二) --- CommonJs和Nodejs 中自定义模块

    一. 什么是 CommonJs? JavaScript 是一个强大面向对象语言,它有很多快速高效的解释器. 然而, JavaScript标准定义的 API 是为了构建基于浏览器的应用程序.并没有制定一 ...

  4. js面向对象笔记

    JavaScript 私有成员实现 到此为止,如果您任然对 JavaScript 面向对象持怀疑态度,那么这个怀疑一定是,JavaScript 没有实现面向对象中的信息隐藏,即私有和公有.与其他类式面 ...

  5. vue.js学习笔记(二):如何加载本地json文件

    在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...

  6. 2019/1.7 js面向对象笔记

    面向对象 1.构造函数里的属性怎么看?看this,谁前面有this谁就是属性. num不是属性,是私有作用域下的私有变量. 2.如何查找面向对象中的this 1.构造函数的this指向实例对象 2.如 ...

  7. JS面向对象组件(二)--Javascript原型链

    原型链 : 实例对象与原型之间的连接,叫做原型链 –__proto__( 隐式连接 ),这就是原型链,平时我们是看不到的. 原型链的最外层 : Object.prototype function Aa ...

  8. angular.js学习笔记(二)

    1.安装core ,shared模块 ng g m core  ng g m shared 2.在shared中导入core模块   core模块只加载一次所以将公共组件放到core中 3.创建公共组 ...

  9. js面向对象(二)——继承

    上一篇随笔讲了封装,这一篇我们说说继承,还是那上一篇猫和狗说事儿 function Dog(name,s){ this.name=name; this.sex=s; } Dog.prototype.t ...

随机推荐

  1. 第六百一十一天 how can I 坚持

    离开泛华了,在那感觉确实挺压抑的,什么环境才适合我呢.哎. 明天回济南,弟弟交房了,去看看房子,和郭娜跨个年,好好谈吧,尽快结婚了. 睡觉.

  2. OpenLDAP与Apache

    1:安装部署Apache 2:在/var/www/html下,添加一个测试文件       echo test > index.html          3:在这之前,需了解Apache的账号 ...

  3. C# 委托的学习

    delegate int GetCalculatedValueDelegate(int x, int y);    //定义是个委托实际上就是抽象一类  参数列表形式和返回值相同的函数AddCalcu ...

  4. Sleep v.s. sleep

    Sleep函数_百度百科 http://baike.baidu.com/link?url=EmOxsG_du8HdLbv_9nDVlahpZOQ6DgkoLKooQInorAqIl_CEhCvBzTC ...

  5. CENTOS6上禁用IPV6和DHCP

    centos 6禁用ipv6方法   首先,在终端输入 ip -6 addr show 和 lsmod | grep ipv6查询一下有无安装IPV6模块,或用netstat -nuptl查看是否有i ...

  6. Hive 执行计划

    执行语句 hive> explain select s.id, s.name from student s left outer join student_tmp st on s.name = ...

  7. jmeter 实现登录一次,多次操作登录后的某一个功能

  8. css3渐变之线性渐变

    css3定义了两种类型的渐变,即线性渐变和径向渐变.这里我要说的是线性渐变. 为了创建一个线性渐变,你必须至少定义两种颜色结点.颜色结点即你想要呈现平稳过渡的颜色.同时,你也可以设置一个起点和一个方向 ...

  9. 【mongodb系统学习之一】mongodb的简单安装

    linux中mongodb的安装(最简单的): 1.下载mongodb安装包,这里用mongodb-linux-x86_64-2.6.9.gz 提供一个下载地址:http://pan.baidu.co ...

  10. Linux块设备加密之dm-crypt分析

    相关的分析工作一年前就做完了,一直懒得写下来.现在觉得还是写下来,以来怕自己忘记了,二来可以给大家分享一下自己的研究经验. 这篇文章算是<Device Mapper代码分析>的后续篇,因为 ...