JavaScript对象及作用域bind
2017-02-16 09:48
176 查看
这里分两个版本将,ES5和ES6
一.ES5
1.JSON对象
var jsObject1 = JSON 这样定义的jsObject1已经是实例对象了,JSON对象创建的对象自动加了this引用:var jsObject1 = { objectName : 'jsObject1', objectClass : 'JSON', testProp1 : 'testProp1', objectf1 : function(){ console.log(this.objectName); }, objectf2 : function(){ return this.objectClass; }, objectf3 : function(){ this.objectf1(); } }这里的实例对象jsObject1中有三个属性和三个属性方法,这里的所有属性都已经自动加了this,所有对象内引用的时候要加this。
jsObject1.objectf1(); //'jsObject1' console.log(jsObject1.objectf2()); //'JSON' jsObject1.objectf3(); //'jsObject1' function testf1(){ //这里testf1赋值给jsObject1的属性,形成属性方法 console.log(this.testProp1); } jsObject1.objectf4 = testf1; jsObject1.objectf4(); //‘testProp1’我们尝试着输出对象的属性和调用对象的方法,并在后面向对象添加属性方法testf1()。this这个东西,大体说就是,this有关的东西在哪里运行,就指向谁。
2.函数对象
/*****构造函数****** * 1.构造函数,用new关键字生成实例对象 * 2.用this引用声明的变量,实例对象可以访问 * 3. */ function jsObject2(name){ var object2Name = name; //局部变量,内部函数可以访问 this.object2Class = 'han shu'; //局部变量,但是通过实例对象可以访问 function of1(){ console.log(object2Name); } this.of2 = function(){ of1(); } } var js2 = new jsObject2('hello'); //实例化对象 js2.of2(); //'hello' console.log(js2.object2Class); //'han shu'先定义函数,然后用new的方法,生成实例对象。
3.JSON对象作用域绑定
/*****JSON对象作用域设置bind****** * 1.在方法赋值等改变了方法作用的时候,需要bind绑定,这样方法内引用的属性才能正确赋值 * 2. * 3. */ var jsObject3 = { objectName : 'jsObject3', onlyo3 : 'hello world o3', o3f1 : function(){ return this.onlyo3; } } var jsObject4 = { objectName : 'jsObject4', onlyo4 : 'hello world o4', o4f1 : function(){}, o4f2 : function(){ return this.o4f1(); } } var z = jsObject3.o3f1.bind(jsObject3); //绑定作用域 jsObject4.o4f1 = z; console.log(jsObject4.o4f2()); //'hello world 03'我们这里将 jsObject3 的属性方法 o3f1 赋值给了 jsObject4 的 o4f1,运行作用域发生了变化,我们要在赋值前,对这个函数进行作用域绑定,用的是 bind()方法。
4.函数对象作用域绑定
/*****函数对象作用域设置bind****** * 1.在方法赋值等改变了方法作用的时候,需要bind绑定,这样方法内引用的属性才能正确赋值 * 2. * 3. */ function jsObject5(){ this.o5 = 'object 5'; this.o5f1 = function(){ return this.o5; }.bind(this); //绑定作用域 } function jsOjbect6(){ this.o6f1 = function(){}; this.o6f2 = function(){ return this.o6f1() }; } var testO5 = new jsObject5(); var testO6 = new jsOjbect6(); testO6.o6f1 = testO5.o5f1; console.log(testO6.o6f2()); //'object 5'
二.ES6
1.创建对象
class object { constructor(name,version){ //构造函数,初始化用 this.name = name; this.version = version; this.test = 'hello world'; } of1(){ console.log(this.version); } of2(){ this.of1(); } } let obj = new object('chad','ES6'); console.log(obj.name); //'chad' obj.of1(); //'ES6' obj.of2(); //'ES6'由于ES6的语法糖,让我们用class关键字创建对象,初始化方式什么的与OC,C++有那么一丝神似了。
2.作用域绑定
class ojbect1 { constructor(x,y){ this.x = x; this.y = y; this.o1f1 = this.o1f1.bind(this); } o1f1(){ return this.x; } } class object2 { constructor(){ } o2f1(){ } o2f2(){ return this.o2f1(); } } let testObject1 = new ojbect1('hello','world'); let testObject2 = new object2(); testObject2.o2f1 = testObject1.o1f1; console.log(testObject2.o2f2()); //'hello'
相关文章推荐
- JavaScript学习—对象作用域
- 【转】Javascript 的词法作用域、调用对象和闭包
- javascript 作用域 闭包 对象 原理和示例分析(上)
- 面向对象的JavaScript-007-Function.prototype.bind() 的4种作用
- 解析JavaScript面向对象概念中的Object类型与作用域
- Javascript 的词法作用域、调用对象和闭包
- javascript中函数的执行环境、作用域链、变量对象与活动对象
- [label][JavaScript]读nowmagic - js词法作用域、调用对象与闭包
- javascript中bind函数的作用实例介绍
- JavaScript对象作用域示例
- JavaScript中什么是prototype原型对象?它有和作用?
- JavaScript执行环境 + 变量对象 + 作用域链 + 闭包
- JavaScript概念总结:作用域、闭包、对象与原型链
- javascript 之Function对象的apply(),call(),bind(),方法和arguments,caller,length属性
- JavaScript核心:对象 原型链 构造函数 执行上下文栈 执行上下文 变量对象 活动对象 作用域链 闭包 This 总结
- 【转】Javascript 的词法作用域、调用对象和闭包
- JavaScript 调用对象 作用域
- 【转】Javascript 的词法作用域、调用对象和闭包
- Javascript中的设置事件/事件对象及事件对象作用
- javascript面向对象(七)原型另外的作用--扩充对象的属性和方法