js面向对象笔记二

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

/*
    第一个参数：constructor 表示构造函数名
    后面的params指该构造函数需要传递的参数，可以多个参数
*/
function testNew(constructor, params){
    //1、将当前函数testNew的所有参数arguments转成数组
    var args = [].slice.call(arguments);

    //2、取出数组args中的第一个元素，也就是构造函数名constructor
    var constructor = args.shift();

    //3、创建一个空对象，继承构造函数的prototype属性
    var context = Object.create(constructor.prototype);

    //4、传入构造函数参数，执行构造函数
    constructor.apply(context, args);

    //5、返回实例化的对象
    return context;
}


//测试
var Person = function(name, age){
    this.name = name;
    this.age = age;
    this.run = function(){
        console.log(this.age + "岁的" + this.name + "正在跑步");
    }
}

var per = testNew(Person, "王大锤", 18);

console.log( per );
per.run();
/*
Person {name: "王大锤", age: 18, run: ƒ}
18岁的王大锤正在跑步
*/

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

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

var per = Person(); 

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); //5188

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}
*/

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

//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}
*/

//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
 */

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.....
*/

var obj = {
    name: '张三', 
    age: 10,
    email: '张三@sina.com'
}

function change(name, age){
    this.name = name;
    this.age = age;
    console.log(this);
}

change.call(obj, '王大锤', '28'); 
//Object {name: "王大锤", age: "28", email: "张三@sina.com"}

var obj = {
    name: '张三', 
    age: 10,
    email: '张三@sina.com'
}

function change(name, age){
    this.name = name;
    this.age = age;
    console.log(this);
}

change.apply(obj, ['王大锤', '28']); 
//Object {name: "王大锤", age: "28", email: "张三@sina.com"}

var d = new Date();

//第一次：将getTime方法赋值给print变量
var print = d.getTime;

try{
    print();  //执行时报错，进入异常处理
}catch(e){
    console.log('报错：' + e.message);  //捕捉异常
    //打印结果：报错：this is not a Date object.
}

//第二次赋值：bind()应用，bind方法将getTime方法内部的this绑定到d对象，这时就可以安全的将这个方法赋值给其他变量
print = d.getTime.bind(d);
print(); //1498740682340

var obj = {
    count:0,
    run: function(){
        console.log(this);
        this.count++;
    } 
}

//1、对象直接调用自己方法，run里面的this指向obj对象
obj.run();
console.log( obj.count );

/* 打印日志：
Object {count: 0, run: function}
1
*/

//2、将对象方法赋值给变量，这时run里面的this指向了顶层对象window
var run2 = obj.run;
run2();  //执行obj.count不会变化，创建了全局变量count=undefined
console.log( obj.count ); //值未变化
console.log( count );  //undefined++ 等于NaN

/* 打印日志：
Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
1
NaN
*/


//3、应用bind方法将run方法内部的this, 绑定到obj对象。
var run2 = obj.run.bind(obj); 
run2();
console.log( obj.count ); //值有变化了

/* 打印日志：
Object {count: 1, run: function}
2
 */

var add = function(x, y){
    return x * this.m + y * this.n;
}

var obj = { m: 2, n: 2};

var newAdd = add.bind(obj, 5);
console.log( newAdd(5) ); //20


//另一种写法
var newAdd2 = add.bind(obj, 5, 5);
console.log( newAdd2() ); //20

/*
给element标签绑定和单击事件，和取消绑定单击事件

//1、第一种绑定和取消绑定方法
element.addEventListener('click', o.m.bind(o)); //绑定
element.removeEventListener('click', o.m.bind(o)); //取消绑定事件

//2、第二种绑定和取消绑定方法
var listenter = o.m.bind(o);
element.addEventListener('click', listenter); //绑定
element.removeEventListener('click', listenter);//取消绑定

//说明：第一种绑定的事件是不能取消绑定的，为什么，因为这种绑定bind方法生成的一个匿名函数
//第二种绑定的事件才能取消绑定
*/

var obj = {
    name: '王大锤',
    arr: ['aa', 'bb', 'cc'],
    print: function(){
        this.arr.forEach(function(n){
            console.log( n + ':' + this.name ); //这个this指向window
        });
    },
    print2: function(){
        this.arr.forEach(function(n){
            console.log( n + ':' + this.name ); //这个this指向obj
        }.bind(this));
    }
}

obj.print();

/* 打印结果：此时print里面的forEach里面的this指向顶层对象window
aa:
bb:
cc:
*/

obj.print2();
/* 打印结果：通过bind绑定this
aa:王大锤
bb:王大锤
cc:王大锤
*/

function copyObject(orig) {
    //创建要复制的对象
  var copy = Object.create(Object.getPrototypeOf(orig));
  copyOwnPropertiesFrom(copy, orig);
  return copy;
}

//拷贝对象的属性
function copyOwnPropertiesFrom(target, source) {
  Object
  .getOwnPropertyNames(source)
  .forEach(function(propKey) {
    var desc = Object.getOwnPropertyDescriptor(source, propKey);
    Object.defineProperty(target, propKey, desc);
  });
  return target;
}



//测试code
var Student = function(name, age, otherInfo){
    this.name = name;
    this.age = age;
    this.otherInfo = otherInfo;
    
    this.run = function(){
        console.l
面向对象之笔记二——————原型与继承
原型与继承原型为什么需要原型？构造器创建对象的时候,实际上会有成员重复如果使用构造器this.方法名=function....方式创建对象.那么每一个对象对应的方法就会重复functionPerson(name){this.name=name;this.sayHello=function(){console.log(‘你好...  查看详情  
                
基础笔记二面向对象编程
对象的三大特性（1）封装，类是最小单元的封装，封装后，其他人直接使用dll保证了代码的安全性（2）继承：.net类库用的多，实际开发中用的不多，用接口多（抽象类等用的不多）（3）多态：重载（编译时多态），和重写（...  查看详情  
                
js面向对象笔记
js面向对象的组成是1、属性2、方法使用的时候是再构造函数里面加属性，在原型里面加方法。如果直接在构造函数里面：传值、新建对象、增加属性/方法、返回对象的这种方法，会产生问题，主要是1、没有new2、函数重复定义...  查看详情  
                
面向对象笔记一
js面向对象的基本概念和基本使用方法->js是不是一个面向对象的语言（众说纷纭）？不是：与传统面向对象的理论语言有矛盾。C#,Java。是：js里面到处都是对象，数组，时间，正则...和DOM。也可以像传统面向对象的语言那样用...  查看详情  
                
js笔记加强版3
JS面向对象及组件开发 JS的面向对象： 1、什么是面向对象编程 用对象的思想去写代码，就是面向对象编程过程式写法面向对象写法我们一直都在使用对象数组Array时间Datevardate=newDate();vararr=newArray();//[]//我们把系统自...  查看详情  
                
js面向对象学习笔记：工厂方式:封装函数
//工厂方式:封装函数functiontest(name){varobj=newObject();obj.name=name;obj.sayName=function(){alert(this.name);};//抛出returnobj;}varp1=test(‘小明‘);p1.sayName();varp2=test(‘小王‘);p2.sayName();//优化//创建对象要注意首字母大写//  查看详情  
                
ecmascript面向对象js学习笔记1
1.对象的prototype属性，可以把它看成创建新对象所依赖的原型。===在我理解，就是prototype下设置的字段是唯一性的，共享性的，不管创建多少个对象，所处空间都是不变的，没有增加也没有减少，指向的指针都是指向那最初的地...  查看详情  
                
软件工程阅读笔记二
...例；Petri网的基本定义，规格实例（信号灯）。第六章：面向对象基础。　　面向对象方法概述（发展史，软件工程方法），面向对象基本概念（对象，类，封装，继承，消息，关联，聚合，多态性），软件建模，统一建模语言U...  查看详情  
                
js的面向对象二(通过构造函数的方式)
通过按住鼠标拖动的例子来演示面向对象的过程css部分#box1{		width:100px;		height:100px;		background:#f00;		position:absolute;		left:0;		top:0;	}HTML部分<divid="box1"></div>JS部分//面向过程1//写出实现逻辑	//varoBox=document.getEl  查看详情  
                
学习笔记-面向对象的程序设计
面向对象的语言有一个标志，即拥有类的概念，抽象实例对象的公共属性与方法，基于类可以创建任意多个实例对象，一般具有封装、继承、多态的特性！但JS中对象与纯面向对象语言中的对象是不同的，ECMA标准定义JS中对象：...  查看详情  
                
php学习笔记二（面向对象和表单）(代码片段)
面向对象//父类classAnimal//成员变量var$name;var$age;//构造函数function__construct($name,$age)$this->name=$name;$this->age=$age;functiongetAge()return$this->age;functiongetName()echo$this->name;functionsetName($name)$this->name=$name;functionsetAge($age)$this-...  查看详情  
                
javascript学习笔记——js从基础到面向对象
 p.p1{margin:0.0px0.0px10.0px0.0px;line-height:18.0px;font:14.0px"SongtiSC"}li.li2{margin:0.0px0.0px0.0px0.0px;line-height:17.0px;font:14.0px"SongtiSC"}span.s1{}ul.ul1{list-style-type:disc}一、认识JS  查看详情  
                
面向对象先导学习笔记
面向对象先导学习笔记经过了Python、C语言和数据结构的学习，感觉对于Java这门新学习的语言上手速度明显快了许多。在学习Java的过程中，个人觉得Java的语法规则在很大程度上与C类似，但是在设计程序和具体实现的过程中，更...  查看详情  
                
python100天学习笔记day25js面向对象及dom(代码片段)
面向对象对象的概念创建对象的字面量语法访问成员运算符创建对象的构造函数语法this关键字添加和删除属性delete关键字标准对象Number/String/Boolean/Symbol/Array/FunctionDate/Error/Math/RegExp/Object/Map/SetJSON/Promise/Generator/Reflect/ProxyBOMwindow对...  查看详情  
                
《架构之美》阅读笔记06
一、阅读内容第五部分第十三章软件架构：面向对象与面向函数第十四章重读经典二、笔记总结（1）面向对象与面向函数函数式编程能够更好的实现模块化设计。在面向对象的编程方式出现之后，我们发现面向对象的程序设计...  查看详情  
                
读书笔记-js高级程序设计-第六章面向对象的程序设计
 EcmaScript有两种属性数据属性和访问器属性数据属性有4个特性ConfigurableEnumerableWritableValue 前三个值的默认值都为false 举例Object.defineProperty(person,"name",{writable:false,value:"niko"}); 一旦属性定义为不可配置的，就不能再...  查看详情  
                
html学习笔记javascript（面向对象）
...在让我们继续跟着大神的脚步前进学习一下JavaScript中的面向对象的思想，其实作为一个iOS开发者，对面向对象还是比较熟悉的，但是昨晚看了一下Js中的面向对象，妈蛋一脸萌比啊。还好有大神。让我们跟着大神的思路在捋一下...  查看详情  
                
java学习笔记3.1.1类与对象
文章目录零、本讲学习目标一、面向对象概述（一）什么是面向对象？（二）面向过程vs.面向对象（三）面向对象三大特点1、封装（encapsulation）2、继承（inheritance）3、多态（polymorph...  查看详情